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

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


});

jQuery选项卡和子选项卡

HTML：

jQuery的：

2 个答案: