4

場合を考慮して、次のメニューがあるとします。

<ul>
<li><a href="index.php">Index</a></li>
<li><a href="about.php">About</a></li>
<li><a href="test.php">Test</a><li>
</ul

メニューは header.php にあります。各ページ (Index、About、Test) には、index.php、about.php、test.php があり、これらすべてのファイルには header.php が含まれています。

私が必要とするのは、別のページにいるときに li にクラスを追加することです。したがって、about.php を使用している場合、クラスは 2 番目の li に追加する必要があります。

jQuery を使用する方法はありますか、またはこの問題を処理する方法は何ですか?

4

7 に答える 7

6 
<ul>
<li><a href="index.php" <?php if($_SERVER['PHP_SELF']=="/index.php") echo 'class="someclass"'; ?> >Index</a></li>
<li><a href="about.php" <?php if($_SERVER['PHP_SELF']=="/about.php") echo 'class="someclass"'; ?> >About</a></li>
<li><a href="test.php" <?php if($_SERVER['PHP_SELF']=="/test.php") echo 'class="someclass"'; ?> >Test</a><li>
</ul>

これは最善の方法ではないかもしれませんが、サーバー側でタスクを実行します。

于 2012-07-20T12:51:11.603 に答える
4

I use something like this on one of my static HTML websites, which you can adapt:

<div id="navigation">

                <?php $currentPath = $_SERVER['REQUEST_URI']; ?>
                <?php $currentClass = ' class="current"'; ?>

                <ul id="nav">
                    <li<?php if( $currentPath == "/" ) { echo $currentClass; } ?>><a href="/">Home</a></li>
                    <li<?php if( $currentPath == "/market-challenge/" ) { echo $currentClass; } ?>><a href="/market-challenge/">Market <br />Challenge</a></li>
                    <li<?php if( $currentPath == "/environmental-benefits/" ) { echo $currentClass; } ?>><a href="/environmental-benefits/">Environmental <br />Benefits</a></li>
                    <li<?php if( $currentPath == "/technology/" ) { echo $currentClass; } ?>><a href="/technology/">Technology</a></li>
                    <li<?php if( $currentPath == "/contact/" ) { echo $currentClass; } ?>><a href="/contact/">Contact</a></li>
                </ul>

            </div>

Enjoy!

于 2012-07-20T12:53:08.707 に答える
2

現在のページを格納するセッション変数を追加します (ヘッダー ファイルを含める前に)。ヘッダー ファイルでこの値を確認し、クラスを割り当てます。

$_SESSION['currentPage'] = 'index';
$_SESSION['currentPage'] = 'about';
$_SESSION['currentPage'] = 'test';

ヘッダーで、

<ul>
<li><a href="index.php" <?php if($_SESSION['currentPage']=="index") echo 'class="selected"' ?>>Index</a></li>
<li><a href="about.php" <?php if($_SESSION['currentPage']=="about") echo 'class="selected"' ?>>About</a></li>
<li><a href="test.php" <?php if($_SESSION['currentPage']=="test") echo 'class="selected"' ?>>Test</a><li>
</ul>
于 2012-07-20T13:04:38.123 に答える
2

私の意見では、簡潔なコードの if を使用します。

<?php $self = $_SERVER['PHP_SELF']; ?>
<ul>
    <li><a href="index.php" <?php echo ($self == "/index.php" ? 'class="selected"' : ''); ?>>Index</a></li>
    <li><a href="about.php" <?php echo ($self == "/about.php" ? 'class="selected"' : ''); ?>>About</a></li>
    <li><a href="test.php" <?php echo ($self == "/test.php" ? 'class="selected"' : ''); ?>>Test</a></li>
</ul>
于 2012-07-20T13:07:36.620 に答える
2

li タグごとに一意の ID を作成します。jquery .attr 関数を使用している場合は、リンクをクリックするとクラスが変更されます

于 2012-07-20T12:49:38.167 に答える
2 
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      jQuery('.nav li').each(function() {
      var href = jQuery(this).find('a').attr('href');
      if (href === window.location.pathname) {
      jQuery(this).addClass('active');
    }
  });

});  
</script>

「.nav li」を DOM 構造により適したものに置き換えます。たとえば、ラッパー div にメニューのクラスがある場合は、次のようにします。jQuery('.menu li')

于 2012-07-20T12:55:12.807 に答える
2

上記の問題については、jQuery を使用してコードビンで解決策を実行しました。

デモ: http://codebins.com/bin/4ldqpa4

ここで、上記のソリューションを実行する手順について説明しました。

1) 最新の jQuery.js および querystring-0.9.0.js JavaScript ファイルをヘッダー タグに含めます。

2) HTML

<div id="panel">
  <ul class="menu">
    <li>
      <a href="#?page=0">
        Index
      </a>
    </li>
    <li>
      <a href="#?page=1">
        About
      </a>
    </li>
    <li>
      <a href="#?page=2">
        Test
      </a>
      <li>
    </ul>
</div>

3) CSS

ul.menu{
  border:1px solid #112266;
  background:#ccc;
}
ul.menu li{
  list-style:none;
  display:inline-block;
  margin-left:10px;
  padding:0px;
  width:60px;
  text-align:center;
}
ul.menu li:hover{
  background:#343434;
}
ul.menu li a{
  padding:0px;
  color:#113399;
  text-decoration:none;
}
ul.menu li:hover a{
  color:#c6b744;
  text-decoration:underline;
}
ul.menu li.active{
  background:#343434;
}
ul.menu li.active a{
  color:#c6b744
}

4) jQuery:

$(function() {
    $(".menu li").click(function() {
        setTimeout(function() {
            var page = $.QueryString("page");
            $(".menu li").removeClass("active");
            $(".menu li:eq(" + page + ")").addClass("active");
        }, 200);
    });

});

上記のソリューションでは、 #?page= のような href リンクを設定する必要があります。これは、bin で新しいページのリダイレクトを使用して Java スクリプトを実行することはできないためです。現在、ページはリダイレクトされていないため、クエリを変更するだけで setTimeout 関数を使用する必要があります#?page= による同じページの文字列。

プロジェクトで上記のソリューションを使用する場合は、上記の jQuery スクリプトを共通の場所に配置して、各メニュー リンクで実行し、現在のページ リンクをアクティブなクラスに設定します。

注: setTimeout 関数を削除する Wrapper は、その内部にコード ライン スクリプトを保持するだけです。以下のようになります。

$(function() {
        $(".menu li").click(function() {
             var page = $.QueryString("page");
             $(".menu li").removeClass("active");
             $(".menu li:eq(" + page + ")").addClass("active");
        });
});
于 2012-07-20T13:54:09.187 に答える