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

スクリプトの 2 番目のビットは、私が解決できないように見える不完全な/トリッキーなビットです。

ここにフィドルがあります

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