jquery - ネストされたタブで動作するようにjQueryタブスクリプトを変更するには?

Question

重複の可能性:
ネストされた jQuery タブ

私はこのコードを持っています: http://jsfiddle.net/ynts/C5FvD/

html:

<ul class='tabs'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
</ul>
<hr>
<div id='tab1'>
    <p>Hi, this is the first tab.</p>
</div>
<div id='tab2'>
    <p>This is the 2nd tab.</p>
    <ul class='tabs2'>
        <li><a href='#tab2-1'>Tab 2 → 1</a></li>
        <li><a href='#tab2-2'>Tab 2 → 2</a></li>
        <li><a href='#tab2-3'>Tab 2 → 3</a></li>
    </ul>
    <div id='tab2-1'>
        <p>This is Tab 2 → <strong>1</strong>.</p>
    </div>
    <div id='tab2-2'>
        <p>This is Tab 2 → <strong>2</strong>.</p>
    </div>
    <div id='tab2-3'>
        <p>This is Tab 2 → <strong>2</strong>.</p>
        <ul class='tabs2-3'>
            <li><a href='#tab2-3-1'>Tab 3 → 3 → 1</a></li>
            <li><a href='#tab2-3-2'>Tab 3 → 3 → 2</a></li>
        </ul>
        <div id='tab2-3-1'>
            <p>This is Tab 2 → 3 → <strong>1</strong>.</p>
        </div>
        <div id='tab2-3-2'>
            <p>This is Tab 2 → 3 → <strong>2</strong>.</p>
        </div>
    </div>
</div>
<div id='tab3'>
    <p>And this is the 3rd tab.</p>
</div>​

そしてこのスクリプト：

$.fn.myTabs = function() {

    return this.each(function() {

        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        // If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
        $active.parent('li').addClass('active');
        $content = $($active.attr('href'));


        // Hide the remaining content
        $links.not($active).each(function () {
                $($(this).attr('href')).hide();
        });

        // Bind the click event handler
        $(this).on('click', 'a', function(e){
                // Make the old tab inactive.
                $active.parent('li').removeClass('active');
                $content.hide();


                // Update the variables with the new link and content
                $active = $(this);
                $content = $($(this).attr('href'));

                // Make the tab active.
                $active.parent('li').addClass('active');
                $content.show();


                // Prevent the anchor's default click action
                e.preventDefault();
        });
    });

};    

$('.tabs, .tabs2, .tabs2-3').myTabs();

これはクリックするとうまく機能しますが、ネストされたタブhttp://fiddle.jshell.net/ynts/C5FvD/show/#tab2-3-2のハイパーリンクに移動しようとすると、最初のトップ タブが開きます。コードを編集してネストされたタブへのリンクを有効にしたいのですが、できません。

© このチュートリアルのタブ スクリプト コードを使用しました: jacklmoore.com/notes/jquery-tabs .