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

我有这个飞出去的菜单。这是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>

我所面临的困难是，当用户点击3个子选项卡中的一个时，我希望它将特定的子选项卡添加到活动类及其父类中。我有一个CSS部分用于激活选项卡

如何将父选项卡和子选项卡添加到JS中的活动类中

---

谢谢：）

我想这样做，但有几种方法可以做到这一点。。。 首先，将一个子类添加到所有

元素中。然后，您可以添加一个“Admin”id，例如添加到您的Admin

。 现在，在jQuery中，您可以检查您按下的元素是否属于类child。如果为真，则可以将active类添加到管理员

代码：

---

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

我会这样做，但有几种方法可以做到这一点。。。 首先，将一个子类添加到所有

元素中。然后，您可以添加一个“Admin”id，例如添加到您的Admin

。 现在，在jQuery中，您可以检查您按下的元素是否属于类child。如果为真，则可以将active类添加到管理员

代码：

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

类似的内容：

<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>

诸如此类：

<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) {
        if($(this).hasClass("child") == true) {
            $("#Admin").addClass('active');
        }
});

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