Question

我有一个bootstrap导航栏，我希望链接变为活动，等待我使用Javascript的子域。我在论坛周围进行了研究，但我没有找到任何有效的方法。请帮帮我。

<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：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

带有引导程序的jQuery解决方案

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

bootstrap navbar活动链接

3 个答案: