Question

我知道这个问题之前已经得到了回答，但由于div的数量和类的数量，我无法弄清楚如何使用我的代码。如何使活动页面具有不同的背景颜色。我正在使用响应式twitter bootstrap（2）框架，因此您必须将查看窗口拉出以查看顶部的所有选项卡。

我的代码如下：

<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的答案，所以我猜它会有所帮助，但我可以使用$（位置）.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");
}) })

作为我工作的第一个月的新手程序员，非常感谢任何帮助。感谢。

Answer 1

.navbar-inverse内没有嵌套.navbar，因此您的选择器找不到任何内容。

我很难在没有完整设置的情况下进行测试，但试试这个：

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

Answer 2

$（“。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

Answer 3

如果你想用jquery做，请尝试使用href选择器。它是这样的：

$(document).ready(function(){
$('a[href="publications.php#start-and-omnibase"]').css('background','red');
});

您总是可以在'a'标记之前添加一些选择器，因此它只适用于特定元素或区域。例如：

$('#menu a[href="publications.php#start-and-omnibase"]').css('background','red');

应该像魅力一样工作，只需要将此href路径设置为动态。

    $(document).ready(function(){
     $('a[href="'+url+'"]').addClass('active');
    });

当然，您需要解析此url变量以更正值。希望它有所帮助：）

我现在也看到你问服务器端的活动项是什么意思。这意味着当您在服务器端（使用PHP或其他）生成该菜单时，在当前处于活动状态的项目上添加类“active”，并将其发送到客户端并设置所有类。如果菜单不是静态的，并且它总是由某些服务器端语言生成，具体取决于从DB或任何其他方式收集的菜单项，在生成菜单项时，您还可以检查用户的当前位置是否与当前菜单项href相同，如果是，您可以轻松地将此项目的类别设置为活动。

如何获取特定菜单以使活动元素具有不同的颜色

3 个答案: