Question

我知道这是非常基本的，但我无法让它发挥作用。

我有一个主导航菜单，当我点击它时显示href并且活动类被添加到菜单（在下面的代码中表示*）

+--------------+---------+--------+
| * Students * | Courses | Batchs |
+--------------+---------+--------+

我在学生中有子页面，如果选择了子页面（有自己的href），我想让父（学生）始终保持活动状态。

如果我点击课程，活动课程将从学生中删除，并使课程处于活动状态及其子页面（基于点击次数）。

注意：子子菜单不是下拉菜单，也不在父菜单下。它们是页面中不同的链接按钮。

.------------------.
|   Add Student    |
:------------------:
| * Edit Student * |
:------------------:
| Delete Student   |
'------------------'

这是当前的代码

HTML

<aside class="menu">
    <ul class="menu-list">
        <li><a href="students.php">Students</a> </li>
        <li><a href="courses.php">Courses</a> </li>
        <li><a href="batches.php">Batches</a> </li>
    </ul>
</aside>

的jQuery

$(document).ready(function() {

    var url = window.location.href;
    url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
    url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
    url = url.substr(url.lastIndexOf("/") + 1);
    if(url == ''){
        url = 'index.php';
    }

    $('.menu li').each(function(){
        var href = $(this).find('a').attr('href');
        if(url == href){
            $(this).addClass('is-active');
        }
    });
});

Answer 1

您可以在所有submanu链接中执行一项操作，为父类提供数据属性，例如data-class =＆＃34; 您的父类＆＃34;。

单击子菜单时，您可以使用其数据类属性来查看需要激活的父项。

选中子页面时突出显示父菜单项

1 个答案: