引导导航栏活动链接答案

【问题标题】：bootstrap navbar active link引导导航栏活动链接
【发布时间】：2019-06-24 17:14:27
【问题描述】：

我有一个引导导航栏，我希望链接能够激活，等待我使用 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>

【问题讨论】：

我会引导回答说，如果访问者禁用了 JS，那么对你的导航做任何会使你的导航无法使用的事情是一个坏主意。也就是说，请澄清 - 您是否有多个子域链接在您的导航上，并且您希望能够突出显示您所在的子域，或者多个链接是否具有与之关联的不同页面并且您想突出显示适用的页面到子域？或者，您只是想在导航中突出显示当前页面，而“子域”是指子目录？
这是一个重复的问题。检查下面的链接。 stackoverflow.com/questions/15866136/…
我知道我重复了一个问题，但这是因为答案对我不起作用。

标签： javascript twitter-bootstrap navbar

【解决方案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')

您需要将其修改为您自己的用例。

【讨论】：

Bootstrap 包含 jQuery（并且需要它），因此在这种情况下使用它是有效的（即使问题上没有 jQuery 标签）
只有 Bootstrap 的 javascript 组件需要 jQuery，但是你是对的，应该没问题。
需要更多信息。 IE。您的 URL 格式如何以及实际链接是什么。
使用变量名“location”会导致死循环。我已使用此代码并将“位置”更改为“位置”，循环不再发生。

【解决方案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>

【讨论】：

这可能适合我，但我需要 jquery 代码是：如果 path = "wanted link" then addClass('active) to element with its ID

【解决方案3】：

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

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

【讨论】：