Question

我有如下导航菜单

<div id="nav">
<ul>
    <li><a href="<?php echo base_url(); ?>home">HOME</a></li>
    <li><a href="#">Classes</a>
        <ul>
            <li><a href="<?php echo base_url(); ?>class_one">class One</a></li>
            <li><a href="<?php echo base_url(); ?>class_two">Class Two</a></li>
            <li><a href="<?php echo base_url(); ?>class_three">Class Three</a></li>
            <li><a href="<?php echo base_url(); ?>class_four">Class Four</a></li>
        </ul>
    </li>
    <li><a href="<?php echo base_url(); ?>results">Exams</a>
    </li>    
</ul>
</div>
<script>
$(document).ready(function () {
    $("[href]").each(function () {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});
</script>

除了导航菜单，我还有一个脚本，通过在我的css文件中使用活动类更改菜单的颜色来显示用户所在的页面。所以所有的主菜单除了＆＃39; Classes＆＃39;工作正常，但我想要的是当用户在“类”下的任何子菜单上时＃39;菜单显示＆＃39;班级＆＃39;作为活动菜单而不是其子菜单。怎么能做到这一点？

Answer 1

添加

$(this).parents('li').find('> a').addClass("active");

if语句中的

。

此代码查找匹配元素的所有父项li标记，然后查找匹配父项的直接子项a标记，并将活动类添加到它们< / p>

导航栏上的活动菜单和子菜单

1 个答案: