javascript - 当子链接处于事件状态时，将事件类添加到父 li

Question

我有一个带下拉菜单的导航，如果您在该部分下的页面上，我想在链接上使用不同的样式。我主要使用 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 寻找答案。谢谢

Answer 1

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

这是一个jsFiddle Demo

jQuery

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

$('.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 */
}

---

额外类(class)选项

使用上面的 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 */
}