问题描述
我正在尝试使用javascript来创建引导<div class="navbar navbar-inverse navbar-fixed-top"> ,在这里我只需要更新javascript文件,而不是在网站的各个页面上管理navbar。
这是横幅的代码:
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")吗?
导航栏设置的方式是否不正确?
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");
}
那可能会也可能不会解决您的问题,但是尽管如此,它应该可以修复代码中的一些错误。
2楼
由于折叠和导航栏折叠在同一元素中,因此您必须编写
$(".collapse.navbar-collapse ul li a")
在提供的代码中没有包含jQuery .js文件,但我认为您自己的代码中已经包含该文件