如何在自舉導航欄中添加活動類

Question

你好我有一個從bootstap的導航欄，我想添加類時，我自動切換頁面avtive。

該怎麼做。我有我的腳本，但它不會工作。

如何用jQuery來做到這一點？

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"> 
       <img src="img/logogram.png" alt=""> 
      </a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="people.html">people</a></li> 
       <li><a href="#">gallery</a></li> 
       <li><a href="inspiration.html">inspiration</a></li> 
      </ul> 

      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="timeline-job.html">Jobs oportunity</a></li> 
       <li><a href="#">hirring a chief?</a></li> 
       <li><a href="register-1.html">login|signup</a></li> 
      </ul> 
      </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
     </nav> 

<script> 
    var loc = window.location.href; 
    $('.navbar ul li a').each(function() { 
     var status = loc.indexOf($(this).attr('href')) > -1; 
     // $(this).toggleClass('active', status); 
     if (status) { 
      $(this).addClass('active'); 
     } 
    }); 
</script> 

請大家幫忙，我不知道爲什麼我的查詢沒有工作

Answer 1

這可能會在你的情況下工作，因爲你似乎是導航到只有頂級網頁：

變化：

var loc = window.location.href; 

到：

var path = window.location.pathname; 
var loc = path.split("/").pop(); 

另外：

來自：

var status = loc.indexOf($(this).attr('href')) > -1; 

到

status = ($(this).attr('href') === loc); 

你有這個問題的方法是，你將被添加active類爲a tag。如果你想將其添加到li，也試試這個：

if (status) { 
    $(this).closest('li').addClass('active'); 

Answer 2

我希望此代碼的工作：

var loc = window.location.href; 
$('.navbar ul li a').each(function() { 
var status = loc.indexOf($(this).attr('href')); 
$(this).closest('li').removeClass('active'); 
console.log(status); 

if (-1 != status) { 
    console.log(status); 
    $(this).closest('li').addClass('active'); 
} 

}); 

Answer 3

所以這是相當容易的，你運行的每個功能爲您.navbar ul li a檢查window.location.href等於導航欄href。然後你添加活動類。

在引導你希望活動類被添加到導航欄<li>標籤，而不是<a>標記，以便在下面的例子中我加入活動類的<a>的父母，但如果由於某種原因，你不希望它添加到李然後從腳本中刪除.parent()，它會將它添加到<a>標記。此外，您不需要手動將活動類添加到第一個<li>標記，因爲腳本會爲您執行此操作，因此您可以從您的navbars <li>標記中刪除所有活動類。所有說的你的jQuery腳本將非常簡單地看起來像這樣：

$(".navbar ul li a").each(function() { 
    if (this.href == window.location.href) { 
     $(this).parent().addClass("active"); 
    } 
});