如何将活动类添加到引导折叠导航栏折叠中的当前 <li>？答案

【问题标题】：How can I add the active class to to the current <li> within bootstrap collapse navbar-collapse?如何将活动类添加到引导折叠导航栏折叠中的当前 <li>？
【发布时间】：2015-07-16 15:35:35
【问题描述】：

我正在尝试使用 javascript 来创建引导程序 <div class="navbar navbar-inverse navbar-fixed-top">，我只需要更新 javascript 文件而不是管理网站各个页面上的导航栏。

这是横幅的代码：

document.write(
"    <div class='navbar navbar-inverse navbar-fixed-top'>" +
"        <div class='container'>" +
"            <div class='navbar-header'>" +
"                <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>" +
"                    <span class='icon-bar'></span>" +
"                    <span class='icon-bar'></span>" +
"                    <span class='icon-bar'></span>" +
"                </button>" +
"                <a class='navbar-brand' href='link1.aspx'>My Website</a>" +
"            </div>" +
"               <div class='collapse navbar-collapse'>" +
"                <ul class='nav navbar-nav'>" +
"                    <li><a href='link1.aspx'>Link 1</a></li>" +
"                    <li><a href='link2.aspx'>Link 2</a></li>" +
"                    <li><a href='link3.aspx'>Link 3</a></li>" +
"                    <li><a href='link4.aspx'>Link 4</a></li>" +
"                    <li><a href='link5.html'>Link 5</a></li>" +
"                    <li><a href='link6.aspx'>Link 6</a></li>" +
"                </ul>" +
"               </div>" +
"            <!--/.nav-collapse -->" +
"        </div>" +
"    </div>"
);

这是我试图将当前页面的导航栏<li> 设置为活动的位置：

$(document).ready(function () {
    $(".collapse navbar-collapse ul li a").each(function () {
        if ($(this).attr("href") == window.location.pathname)
            $(this).addClass("active");
    })
})

所有代码都位于一个 header.js 文件中，我在开始时从每个页面调用该文件以显示标题：

<html>
  <body>
    <script type="text/javascript" src="Scripts/header.js"></script>
    </body>
  </html>

问题是代码不起作用，我不知道为什么。我是否错误地声明了$(".collapse navbar-collapse ul li a")？导航栏设置的方式不正确？

【问题讨论】：

标签： javascript jquery css asp.net twitter-bootstrap

【解决方案1】：

由于 collapse 和 navbar-collapse 在同一个元素中，您必须编写

$(".collapse.navbar-collapse ul li a")

在提供的代码中没有包含 jQuery .js 文件，但我假设您在自己的代码中拥有该文件

【讨论】：

我在 html 页面头中调用了 jQuery .js，只是忘记将它包含在示例 html 文件中。。我尝试更新您的建议，但仍然无法正常工作。我做了一个警报（window.location.pathname）；检查 if 语句中使用的路径，它在 link1 页面上返回 /link1.aspx。尝试将 / 添加到所有链接，但仍然无法正常工作。
我创建了一个plunker，它将写入找到的每个链接的href。查看 script.js 文件（所有内容都写在那里）顺便说一下，使用 plunker 时 window.location 与您的服务器上的不同，因此当您比较链接时可能会有所不同跨度>
感谢您，我能够使用此代码激活所有链接（将 / 添加到链接路径是关键）：$(document).ready(function () { $(".collapse.navbar-collapse ul li a").each(function () { alert("found a link with href=" + $(this).attr("href")); if ($(this).attr("href") == window.location.pathname) { $(".collapse.navbar-collapse ul li").addClass("active"); } }) });。现在，我只需要知道为什么 if 语句不起作用！
由于 plunker 上的 window.location.pathname 与您的服务器上的不同，我建议您将警报更改为 alert("compare: " + window.location.pathname + " with:" + $(this).attr("href")); 这里检查两者如何值不同并进行调整，以使字符串相等。如果您愿意，可以告诉我当您访问其中一个链接时 window.location.pathname 会产生什么，我可能会帮助您调整您的 if 语句。
运行比较时值相同。我认为 if 语句可能会为所有 li 添加活动，因为我正在运行每个链接并将链接与自身进行比较，这总是正确的。更新为 ` $(".collapse.navbar-collapse ul li").each(function () { `? 后如何在循环中指定链接

【解决方案2】：

你有这个 HTML：

<div class='collapse navbar-collapse'>

而你正在使用这个 JS：

$(".collapse navbar-collapse ul li a")

尝试将上面的行改为：

$(".collapse ul li a")

...或...

$(".collapse.navbar-collapse ul li a")

另外，您的 if 语句看起来结构不佳。

尝试改变这个：

if ($(this).attr("href") == window.location.pathname)
    $(this).addClass("active");

到这里：

if ($(this).attr("href") == window.location.pathname) {
    $(this).addClass("active");
}

这可能会或可能不会解决您的问题，但它应该可以修复您代码中的一些错误。

【讨论】：