当子链接处于活动状态时，将活动类添加到父 li答案

【问题标题】：Add active class to parent li when child link is active当子链接处于活动状态时，将活动类添加到父 li
【发布时间】：2014-09-08 14:29:04
【问题描述】：

我有一个带有下拉菜单的导航，如果您在该部分下的页面上，我希望在链接上使用不同的样式。我主要使用 Bootstrap，所以有很多 CSS。以下是几个部分的 HTML 外观：

<li class='dropdown'>
    <a href='#' class='dropdown-toggle' data-toggle='dropdown'>General Info<span class='caret'></span></a>
    <ul class='dropdown-menu' role='menu'>
        <li><a href='/email_list.php'>Employee Directory</a></li>
        <li><a href='/docs.php'>Documents</a></li>
        <li><a href='/ftp.php'>FTP</a></li>
        <li><a href='/manage/'>Manage</a></li>
        <li><a href='/flyspray'>Bug/Feature Tracking</a></li>
    </ul>
</li>
<li class='dropdown'>
    <a href='#' class='dropdown-toggle' data-toggle='dropdown'>Job Info<span class='caret'></span></a>
    <ul class='dropdown-menu' role='menu'>
        <li><a href='/job/list'>Job List</a></li>
        <li><a href='/files_required.php'>Files Rqrd</a></li>
        <li><a href='/incoming_list.php'>Incoming Data List</a></li>
        <li><a href='/signoff.php'>Signoffs</a></li>
        <li><a href='/leader_list2.php'>Leader List</a></li>
        <li><a href='/milestones'>Milestone/Timelines</a></li>
    </ul>
</li>

例如，如果有人在工作列表页面上，工作信息将被突出显示。

编辑：我知道这不能只用 CSS 来完成。使用 JavaScript 或 PHP 寻找答案。谢谢

【问题讨论】：

CSS 没有父选择器，也不知道请求它使用的 URL。
是的，但我知道有一种方法可以做到这一点。我假设使用 PHP 或 JavaScript？
哦，当然。你没有提到你可以使用 JavaScript 或 PHP。
抱歉我写的时候忘记放了。我可以肯定地使用它们。不过，最简单的方法会更好
使用 PHP 添加 current 类并为该类添加样式将是您最好的选择。您可以使用$_SERVER 找出请求的页面。

标签： javascript php html css twitter-bootstrap

【解决方案1】：

比较链接的href 和location.pathname 并横向向上添加一个active 类

这是jsFiddle Demo

jQuery

当链接的 href 等于当前路径名 (/link.php) 时，它将被赋予一个 active 类，并且该链接所在的类为 dropdown 的 li 将被赋予一个@ 987654331@ 类，允许您为它们设置样式。

$('.dropdown a').filter(function(){

    return $(this).attr('href') == location.pathname

}).addClass('active').closest('ul').parent().addClass('active');

CSS

使用nth-child 获取由索引选择的子元素，基本上 - 选择要设置样式的活动下拉列表

.dropdown.active:nth-child(1) { 
    /* first dropdown */
}

.dropdown.active:nth-child(2) { 
    /* second dropdown */
}

.dropdown a.active {
    /* any active link */
}

额外课程选项

使用上面的jQuery，你可以为每个.dropdown添加一个类来单独设置样式，更具可读性

这是一个jsFiddle Demo

HTML

<li class='general-info dropdown'>
    <ul class='dropdown-menu' role='menu'>
    <!-- -->
    </ul>
</li>

<li class='job-info dropdown'>
    <ul class='dropdown-menu' role='menu'>
    <!-- -->
    </ul>
</li>

CSS

.general-info.active {
    /* first dropdown */
}   

.job-info.active {
    /* second dropdown */
}    

.dropdown a.active {
    /* any active link */
}

【讨论】：

好的，我正在努力让它工作。问题是导航列表是使用 PHP 生成的，所以当我创建类时，名称有空格。现在正在处理它，并将回复您。非常感谢您的帮助
如果您想避免添加课程，请在我的答案中添加更新

【解决方案2】：

您不能根据 URL 设置元素的样式。

实现您所质疑的最理想的方法是使用 PHP 等服务器端脚本将类添加到下拉列表中。

示例代码为：

menu.php

<ul class="menu">
    <li <?php echo ($page == 'page1') ? 'class="current"' : '';?>> <a href="#">Page1</a> </li>
    <li <?php echo ($page == 'page2') ? 'class="current"' : '';?>> <a href="#">Page2</a></li>   
</ul>

以及您要在其中包含菜单的 php 页面：

<?php     
    $page = 'page1';
    include('menu.php');
?>

并在 CSS 中为 current 类设置样式。

【讨论】：

这是我的第一选择，使用include 技巧和.htaccess 文件中的一些重定向。它可以让您在您的网站上进行微调。
OP 需要如何设置$page 以及子链接的逻辑如何将current 的类添加到父级别li 需要一些$_SERVER 的逻辑来确定当前 url 和一些数组摆弄来确定子链接父类来回答问题，但通常我首先同意服务器端

【解决方案3】：

试试这个应该可以的。

 var url = "http://" + "<?php echo $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>";
        $('ul.nav a[href="' + url + '"]').parent().addClass('active2');
        $('.dropdown a').filter(function () {
            return $(this).attr('href') == url
        }).closest('ul').parent().addClass('active2');

【讨论】：

它会找到当前的 URL 和它的父级并设置激活（子菜单和父菜单）