当子链接处于活动状态时，将活动类添加到父li - Add active class to parent li when child link is active

Add active class to parent li when child link is active

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

比较链接的href和location.pathname，并向上遍历dom以添加active类

这是jsFiddle演示

jQuery

当链接的href等于当前路径名（/link.php）时，它将被赋予一个active类，而链接所在的dropdown类的li将被赋予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 */
}

特级选项

使用上面的jQuery，您可以为每个.dropdown添加一个类，以单独进行样式设置，从而提高的可读性

这是jsFiddle演示

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 */
}

不能根据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中设置CCD_ 12类的样式。

试试这个，它应该能工作。

 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');