2

I've been struggling to get this going, but I am missing something. I want to show the tab that is currently active. I'm using jQuery to achieve this.

With the "main tabs" .tabs_item it works fine, but if I click on a "sub-tab" item, I want to activate the parent of that "sub-tab"

Hope its put clearly enough.

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

The 2nd bit of the script is the faulty/tricky bit that I can't seem to sus out.

Here is the fiddle

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

4

2 回答 2

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

这是小提琴

于 2013-07-30T10:22:35.740 回答
0

尝试这个 ....

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


});
于 2013-07-30T10:58:00.020 回答