jQuery 选项卡和子选项卡

Question

我一直在努力让它继续下去，但我遗漏了一些东西。我想显示当前处于事件状态的选项卡。我正在使用 jQuery 来实现这一目标。

使用“主选项卡”.tabs_item 它工作正常，但如果我单击“子选项卡”项，我想激活该“子选项卡”的父项

希望它足够清楚。

HTML:

<div class="cssmenu">   
    <ul>
        <!-- 1 -->
        <li class='tabs_item' id='tabDemographic'><a href='#page-1' class='active_pat_tab'><span>Demographics</span></a></li>

        <!-- 2 -->
        <li class='has-sub tabs_item'><a href='#page-2'><span>Admission</span></a>
            <ul>
                <li id='tabAdmission' class='tabsub'><a href='#'><span>Admission detail</span></a></li>
                <li id='tabMedicalStaff' class='tabsub last_sub' ><a href='#page-12'><span>Staff</span></a></li>
            </ul>
        </li>

        <!-- 3 -->
        <li class='has-sub tabs_item'><a href='#'><span>History</span></a>
            <ul>
                <li class='tabsub' id='tabComorbidity'><a href='#page-6'><span>Co-Morb</span></a></li>
                <li class='tabsub last_sub' id='tabPMH'><a href='#page-7'><span>PMH</span></a></li>
            </ul>
        </li>

        <!-- 4 -->
        <li class='tabs_item' id='tabModalities'><a href='#page-10'><span>Modalities</span></a></li>
        <li class='tabs_item' id='tabAssessments'><a href='#page-8'><span>Assessments</span></a></li>
        <li class='last tabs_item' id='tabDischarge'><a href='#page-11'><span>Discharge</span></a></li>
    </ul>
</div>

jQuery:

$('.cssmenu ul li a').click(function() {
    $('.cssmenu ul li a.active_pat_tab').removeClass('active_pat_tab');
    $(this).closest('.cssmenu ul li a').addClass('active_pat_tab');
});

$('.cssmenu ul li ul li.tabsub a').click(function() {
    $('.cssmenu ul li a.active_pat_tab').removeClass('active_pat_tab');
    $(this).parents('.cssmenu ul li a').addClass('active_pat_tab');
});

脚本的第二部分是我似乎无法解决的错误/棘手的部分。

这是 fiddle

http://jsfiddle.net/nel_mo/xqqpE/3/

Answer 1

答案在这里。

$(this).parents('ul').parents('li').find('a').addClass('active_pat_tab');

因此子选项卡的脚本将如下所示。

    $('.cssmenu ul li ul li.tabsub a').click(function() {
    $('.cssmenu ul li a.active_pat_tab').removeClass('active_pat_tab');
    $(this).parents('ul').parents('li').find('a').addClass('active_pat_tab');
});

这是 fiddle