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

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

这里是小提琴

http://jsfiddle.net/nel

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

这是小提琴

Answer 2

试试这个..。

$(document).ready(function(){
    $('.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().eq(2).children('a').addClass('active_pat_tab');
    });


});