引导导航栏活动链接

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");
});