アクティブなクラスを 'home'リンクに追加する

jQueryを使用して、activeクラスをメインナビゲーションの項目に追加しています。しかし、私はactiveクラスを適用するためにホームページからhrefを得ることができません。アクティブなクラスを 'home'リンクに追加する

これは、私はすでに試したものです：私はここに行方不明です何

<ul id="mainNavbar" class="nav navbar-nav navbar-right text-uppercase"> 
    <li><a href="/">Home</a></li> 
    <li><a href="services.html">Services</a></li> 
    <li><a href="contact.html">Contact us</a></li> 
</ul>

jQueryの

$(function() { 
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    $("#mainNavbar li a").each(function(){ 
    if($(this).attr("href") == pgurl || $(this).attr("href") == '') 
     $(this).addClass("active"); 
    }) 
});

？

出典

2016-06-28 brunodd

'pgurl'のデバッグを試したことがありますか？ – j08691

それは私のために働いています、あなたはjqueryをインポートしましたか？ – gnllucena

わたしのために働いた例：https://jsfiddle.net/x9kLbgj4/1/入力例と期待出力の比較 – dan08

私はteste.htmlファイルを作成しましたが、これは問題なく動作します。

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 
    <script type="text/javascript"> 
     $(function() { 
      var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 

      $("#mainNavbar li a").each(function(){ 
       if($(this).attr("href") == pgurl || $(this).attr("href") == '') 
        $(this).addClass("active"); 
      }) 
     }); 
    </script> 
</head> 
<body> 
    <ul id="mainNavbar" class="nav navbar-nav navbar-right text-uppercase"> 
     <li> 
      <a href="/">Home</a> 
     </li> 
     <li> 
      <a href="teste.html">Services</a> 
     </li> 
     <li> 
      <a href="contact.html">Contact us</a> 
     </li> 
    </ul> 
</body> 
</html>

出典

2016-06-28 16:35:48 gnllucena

置き換えるこのライン

$(this).attr('class','active'); // add this line

のjQuery

$(function() { 
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    $("#mainNavbar li a").each(function(){ 
    if($(this).attr("href") == pgurl || $(this).attr("href") == '') 
     $(this).attr('class','active'); // add this line 
    }) 
});

出典

2016-06-28 16:38:06

をこの

を試してみてください、あなたのHTMLページにhtmlタグにactiveクラスを入れて使用しない理由このような：

<ul id="mainNavbar" class="nav navbar-nav navbar-right text-uppercase"> 
    <li> 
     <a href="/" class="active">Home</a> 
    </li> 
    <li> 
     <a href="teste.html">Services</a> 
    </li> 
    <li> 
     <a href="contact.html">Contact us</a> 
    </li> 
</ul>

など、この<a href="contact.html" class="active">など、あなたのコンタクトページadd active class on <a> linkの

。

出典

2016-06-28 16:41:42

アクティブなクラスを 'home'リンクに追加する

答えて

関連する問題