2

可能重复：
嵌套的 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的超链接时，第一个顶部选项卡会打开。我想编辑我的代码以启用指向嵌套选项卡的链接，但我不能。

© 我使用了本教程中的 tabs 脚本代码：jacklmoore.com/notes/jquery-tabs。

4

0 回答 0