1

ユーザーがページを閲覧しているときにサイトメニューをハイライト/アクティブにしたいのですが、以下のコードは機能しません。

誰かが何が問題なのかを確認してもらえますか? ありがとう。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
// this will get the full URL at the address bar
var url = window.location.href; 

// passes on every "a" tag 
$("#nav_main a").each(function() {
    // checks if its the same on the address bar
    if(url == (this.href)) { 
        $(this).closest("li").addClass("active");
    }
});
});
</script>

<style type="text/css">
.active{
color:#f93;
}
</style>

<div id="nav_main">
<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="aboutFrontend.php">About</a></li>
    <li><a href="subscribeFrontend.php">Subscribe</a></li>
    <li><a href="newsFrontend.php">News</a></li>
    <li><a href="magFrontend.php">Mag</a></li>
    <li><a href="contactFrontend.php">Contact</a></li>
</ul>
</div>
4

5 に答える 5

2

This should also work:

<script>
$(document).ready(function(){
    var url = (window.location.href).split("/").pop();
    $('#nav_main a[href="'+url+'"]').addClass('active');
});
</script>
于 2013-02-26T04:29:52.780 に答える
0

window.location.urlのような絶対 URL を与えるhttp://zyx.com/<your-page>ため、等価条件は失敗します。等値テストを正規表現ベースのソリューションに置き換える必要があります。これは、ロケーション パスがメニュー項目の href のいずれかで終わるかどうかをテストします。

変更する必要があります

 if(url == (this.href)) {

に

if(new RegExp('/' + this.href + '^').test(url)) {
于 2013-02-26T03:43:44.673 に答える
0

さて、私はあなたの例を試してみましたが、それは私のために働いています。1 つのリンクの URL を空白のままにしておくと、条件に入り、スタイルが適用されます。そのため、URL に警告して、正しい URL を取得しているかどうかを確認することをお勧めします。

JSFiddle でのコード:作業コード

<div id="nav_main">
<ul>
    <li><a href="">Home</a></li>
    <li><a href="aboutFrontend.php">About</a></li>
    <li><a href="subscribeFrontend.php">Subscribe</a></li>
    <li><a href="newsFrontend.php">News</a></li>
    <li><a href="magFrontend.php">Mag</a></li>
    <li><a href="contactFrontend.php">Contact</a></li>
</ul>

1つのリンクを空白のままにしました。URLを確認してください。

私もあなたのコードをオフラインで試しました。URL が正しければ、機能します。

于 2013-02-26T03:53:37.387 に答える
0

これは、受け入れられた答えよりもはるかにうまく機能します:

$(document).ready(function () {
    $page = window.location.href;

    if (!$page) {
      $page = 'index.html';
    }

    $('.mainNav  li a').each(function () {

      var $href = this.href;

      if (($href == $page) || ($href == '')) {
        $(this).parent().addClass('active');
      } else {
        $(this).parent().removeClass('active');
      }

    });
    return false;

  });
于 2014-11-21T08:02:13.823 に答える