使用javascript将HTML子项和父选项卡添加到活动类

Question

我有这个飞出来的mene。 这是HTML：

<ul class="nav">
    <li class="tab"><a class="active" href='#sw_operations'>Software Operations</a></li>
    <li class="tab"><a href='#software'>Software</a></li>
    <li class="tab"><a href='#fac_staff'>Fac/Staff Members</a></li>
    <li class="tab"><a href='#vendor'>Vendors</a></li>
    <li class="tab"><a href='#admin'>Admin</a>
        <ul>
            <li><a href='#users'><span>Users</span></a></li>
            <li><a href='#variables'><span>Variables</span></a></li>
            <li><a href='#Reports'><span>Reports</span></a></li>
        </ul>
    </li>
</ul>

这是JS：

$('.tab a').on('click', function (e) {
    e.preventDefault();
    $(".tab a").removeClass('active');
    $(".tab a").parent().removeClass('active');
    $(this).addClass('active');
    target = $(this).attr('href');
    $('.tab-content > div').not(target).hide();
    $(target).fadeIn(600);
});

我正在努力的是，当用户点击3个子选项卡中的一个时，我希望它将该特定子选项卡添加到活动类以及它的父级。 我有一个CSS部分，用于激活标签。

除了子选项卡之外，如何将父选项卡添加到JS中的活动类？

谢谢 ：）

Answer 1

我会这样做，但有几种方法可以做到这一点......首先，你要为所有<li>元素添加一个子类。 然后，您可以向管理员<li>添加“管理员”ID。 现在在jQuery中，您可以检查您按下的元素是否为class child。 如果是，则可以将您的活动类添加到Admin <li> 。

码：

<li class="tab" id="Admin"><a href='#admin'>Admin</a>
    <ul id="Children">
        <li><a class="child" href='#users'><span>Users</span></a></li>
        <li><a class="child" href='#variables'><span>Variables</span></a></li>
        <li><a class="child" href='#Reports'><span>Reports</span></a></li>
    </ul>
</li>

jQuery代码：

$('.tab a').on('click', function (e) {
        if($(this).hasClass("child") == true) {
            $("#Admin").addClass('active');
        }
});

您只需将if语句附加到代码中，我没有包含您的代码。

Answer 2

像这样的东西：

<li class="tab"><a id='admin' href='#admin'>Admin</a>
<ul>
    <li><a href='#users' data-parent-id='admin'><span>Users</span></a></li>
    <li><a href='#variables' data-parent-id='admin'><span>Variables</span></a></li>
    <li><a href='#Reports' data-parent-id='admin'><span>Reports</span></a></li>
</ul>

$('.tab a').on('click', function (e) {
    e.preventDefault(enter code here);
    $(".tab a").removeClass('active');
    $(this).addClass('active');
    $(".tab #"+$(this).attr('data-parent-id')).addClass('active');
    target = $(this).attr('href');
    $('.tab-content > div').not(target).hide();
    $(target).fadeIn(600);
});