Question

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

这是横幅的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

你有这个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");
}

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

Answer 2

由于崩溃和 navbar-collapse 属于您必须编写的同一元素

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

在提供的代码中，没有包含jQuery .js文件，但我假设你在自己的代码中有这个

如何将活动类添加到bootstrap折叠导航栏崩溃中的当前<li>？

2 个答案: