機能は、現在

Question

に同様の質問が既に回答されているが、私は自分のコードでそれらを実装するトラブルを抱えている：

Add active class to current page navigation link

​​

jQuery active link current page

基本的には、アンカータグがユーザーが現在のページと一致する場合、クラスをアンカータグに追加する方法を理解しようとしています。私は3つのhtmlページを持っています - Index、About、Contact。彼らはすべて同じナビゲーションバーを持っています。

----------------------------------- Index.html -------- -------------------------------------------------- ------------

<nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings --> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button"> 
       <span class="sr-only">Toggle navigation</span> 
      </button> 
      <a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a> 
     </div> 

     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a class="navAnchor" href="about.html">About |</a></li> 
       <li><a class="navAnchor" href="contact.html">Contact |</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

------------------------------- ---- About.html ------------------------------------------- ---------------------------

<nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings --> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button"> 
       <span class="sr-only">Toggle navigation</span> 
      </button> 
      <a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a> 
     </div> 

     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a class="navAnchor" href="about.html">About |</a></li> 
       <li><a class="navAnchor" href="contact.html">Contact |</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

---------------- ------------------- Contact.html ---------------------------- ------------------------------------------

<nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings --> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button"> 
       <span class="sr-only">Toggle navigation</span> 
      </button> 
      <a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a> 
     </div> 

     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a class="navAnchor" href="about.html">About |</a></li> 
       <li><a class="navAnchor" href="contact.html">Contact |</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

私のCSSでは、私の.navAnchorsはsyledです。また、ユーザーが現在いるページと一致するクラス.currentをアンカータグに追加します。

---------------------------------- index.css --------- --------------------------

.navbar-collapse > .nav > li > a:link, 
    .navbar-collapse > .nav > li > a:visited 
{ 
    color: #95a1aa; 
    font-size: 15px; 
} 

.current { 
    color: pink; 
} 

私は現在、JavaScriptでこの機能をしようとしているが、それは働いていない：

------------------------ index.js --------------------- - ページの

var path = window.location.pathname.split("/").pop(); 
var link = $(".navAnchor"); 

window.setInterval(function(){ 
    for(var i = 0; i < 2; i++) { //2 refers to the number of links on nav page (about and contact) 
    if(path === link.eq(i).attr('href')){ 
     link.eq(i).addClass("current"); 
    } 
    } 
}, 5000); 

のリンクは以下のとおりです。 （index.htmlを）https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/index.html?_c9_id=livepreview8&_c9_host=https://ide.c9.io

（about.html）https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/about.html

（contact.html）https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/contact.html すべてのヘルプまたはチップが理解されます！

-------------------------------------- EDIT ------- --------------------------------------

私のために働く（私のJavaScriptのタブ）あなたは現在のクラスがliになりたい

$(document).ready(function(){ 
    var path = window.location.pathname.split("/").pop(); 

    $(".navAnchor").each(function(){ 
    if($(this).attr('href') == path){ 
     $(this).css("color", "black"); 
     $(this).css("font-weight", "bold"); 
    } 
    }) 
}) 

Answer 1

- ないa。あなたのナビリンクを反復して、hrefをチェックし、パス変数と一致するかどうかを確認する - 現在のクラスをaの親（li）に追加する。しかし、あなたがCurrentクラスをaにしたければ、コード内にparent（）を入れておけばうまくいくはずです。また、大文字で表記されたページがありますが、あなたのHFSは小文字であることに注意してください。例えば：About.html vs about.html。これらは同じ場合にする必要があります。

$(document).ready(function(){ 
    var path = window.location.pathname.split("/").pop(); 

    $(".navAnchor").each(function(){ 
    if($this).attr('href') == path){ 
     $(this).parent().addClass('current'); 
    } 
    }) 
})