引導導航欄活動鏈接

Question

我有一個引導導航欄，我希望這些鏈接在我使用Java的哪個子域中處於活動狀態。 我在整個論壇上進行了研究，但沒有發現任何有效的方法。 請幫幫我。

<nav class='navbar navbar-default'>
  <div class='container-fluid'>
<div class='navbar-header'>
<div class='collapse navbar-collapse' id='navbar-collapse'>
      <ul class='nav navbar-nav'>
        <li><a href='#'></a></li>
        <li><a href='#></a></li>
        <li><a href='#'></a></li>
  </ul>
  </div>
</div>
    </div>
</nav>

Answer 1

使用jQuery是因為我很懶：

// Get the page URL
var url = window.location.href.split('/')

// Get the subdomain
var location = url[url.length-1]

// Apply active class to the link that matches the subdomain.
$('a[href$="' + location + '"]').addClass('active')

您需要將其修改為自己的用例。

Answer 2

這是一個解決方案，但使用jQuery：

 jQuery(document).ready(function(){ $path = window.location.href; jQuery('a[href="' + $path + '"]').each(function(){ jQuery(this).addClass('active'); }); }); 

 a{ display: block; } a.active{ background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="#">A Link</a> <a href="http://stackoverflow.com/">Another link</a> <a href="http://stacksnippets.net/js">Active link</a> 

Answer 3

帶引導的jQuery解決方案

$(document).ready(function(){
   $(".active").removeClass("active");
   $("#link-football").addClass("active");
});