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。如果确实如此，则可以将您的活动类添加到管理员<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);
});

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

2 个答案: