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