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进行比较，并横向显示dom以添加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 */
}

额外课程选项

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

Answer 2

您无法根据网址设置元素的样式。

实现您所质疑的最理想的方法是使用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类的样式。

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

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

3 个答案: