我知道之前已经回答过这个问题,但由于 div 的数量和类的数量,我无法弄清楚如何使用我的代码来解决这个问题。如何使事件页面具有不同的背景颜色。我使用的是响应式 twitter bootstrap (2) 框架,因此您必须拉开查看窗 Eloquent 能看到顶部的所有选项卡。
jsFiddle 是:http://jsfiddle.net/2bhnQ/1/
我的代码如下:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" href="#">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.php">HOME</a>
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown">
<a href="people.php" class="dropdown-toggle" data-toggle="dropdown">People<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="people.php">All</a></li>
<li><a href="people.php#staff">Staff</a></li>
<li><a href="people.php#grad">Graduate Students</a></li>
<li><a href="people.php#undergrad">Undergraduate Students</a></li>
<li><a href="people.php#visitors">Visitors and Affiliates</a></li>
<li><a href="people.php#interns">Interns</a></li>
<li><a href="people.php#alumni">InfoLab Alumni</a></li>
</ul>
</li>
<li class="dropdown">
<a href="publications.php" class="dropdown-toggle" data-toggle="dropdown">Publications<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="publications.php">All</a></li>
<li><a href="publications.php#start-and-omnibase">START and Omnibase</a></li>
<li><a href="publications.php#question-answering">Question Answering</a></li>
<li><a href="publications.php#semantic">The Semantic Web</a></li>
<li><a href="publications.php#other">Other Publications</a></li></ul>
</li>
<li>
<a href="start-system.php">How START works</a></li>
</ul>
</div>
</div>
</div>
我试过这样做,但没有成功。 (这只是另一个 stackoverflow 的回答,所以我猜它会有帮助,但我可以使用 $(location).attr('href') 或任何其他选项,如果有帮助的话。)
$(document).ready(function(){
alert(window.location.pathname);
$(".navbar navbar-inverse navbar-static-top .navbar-inner .container .nav-collapse .nav li a").each(function(){
if($(this).attr("href")==window.location.pathname)
$(this).addClass("active");
}) })
作为我工作第一个月的新手程序员,非常感谢任何帮助。谢谢。
最佳答案
$(".navbar navbar-inverse navbar-static-top .navbar-inner .container .nav-collapse .nav li a") 这不会针对您正在寻找的内容。如果您想像现在这样具体,您需要: $(".navbar.navbar-inverse.navbar-static-top .navbar-inner .container .nav-collapse .nav li a")
选择器中的空格暗示层次结构,如果您想要一个元素具有多个类,则类之间不留空格。 .navbar.navbar-inverse.navbar-static-top 是包含所有 3 个类的 div。
很可能,您只定位 .navbar 而不是 .navbar.navbar-inverse.navbar-static-top 是安全的
关于jquery - 如何让我的特定菜单使事件元素具有不同的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17999730/