Question

我必须建立一个关于统计数据的网站，因此我需要一个4级嵌套标签菜单。（日期/路线/分类/ Disziplins）

在这里，我找到了2级的东西，但我不能改变它更多级别:( 我希望有人能找到解决方案:)

非常感谢！

$("ul.nav-tabs a").click(function (e) {
  e.preventDefault();  
    $(this).tab('show');
});

<div class="tabbable boxed parentTabs">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#set1">Tab 1</a>
        </li>
        <li><a href="#set2">Tab 2</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade active in" id="set1">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub11">Tab 1.1</a>
                    </li>
                    <li><a href="#sub12">Tab 1.2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="sub11">
                        <p>Tab 1.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub12">
                        <p>Tab 1.2</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="set2">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub21">Tab 2.1</a>
                    </li>
                    <li><a href="#sub22">Tab 2.2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="sub21">
                        <p>Tab 2.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub22">
                        <p>Tab 2.2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我已经为选项卡编写了一些代码，可以进一步编辑以添加更多级别。看看这是否有帮助。

JS：

    $('.tabs a').click(function(){
    var idd = $(this).attr('href');

    if($(idd).hasClass('tabs_content')) //First Level
    {
        $('.tabs_content').hide();
        $(idd).fadeIn();
        $(idd).find('.tabs ul li:first a').click();
        $('.tabs:first ul li a.active').removeClass('active');
        $(this).addClass('active');

    }else if($(idd).hasClass('tab_content_inner')) //Second Level
    {
        $('.tab_content_inner').hide();
        $(idd).fadeIn();
        $(idd).find('.tabs ul li:first a').click();
        $(this).parent().siblings().find('a.active').removeClass('active');
        $(this).addClass('active');

    }else if($(idd).hasClass('tab_content_inner_inner')) //3rd Level
    {
        $('.tab_content_inner_inner').hide();
        $(idd).fadeIn();
        $(this).parent().siblings().find('a.active').removeClass('active');
        $(this).addClass('active');
    }

    return false;
});

这是一个有效的DEMO

可以更逻辑地完成以减少冗余代码。

Answer 2

根据@ karan3112的回答，我能够提出一个更好的解决方案，它支持无限制的嵌套。以下脚本相对定位相应的元素，而不需要其他类，如tab_content_inner。

$('.tabs a').click(function ()
{
    var anchor = $(this);

    var tabs = $(anchor).parent().parent().parent();
    $(tabs).find('li > a').removeClass('active');

    select_tab(anchor)
});

$('.tabs a.active').each(function()
{
    select_tab(this)
});

function select_tab(anchor)
{
    if (!$(anchor).hasClass('active'))
        $(anchor).addClass('active');

    var li = $(anchor).parent();
    var ul = $(li).parent();

    var tabs = $(ul).parent();
    var index = $(li).index();

    var form = $(tabs).parent();

    var contents = $(form).find('> .tabs-content');
    $(contents).hide().eq(index).fadeIn();
}

首先，我们显示每个'标签集'的活动标签（如果有），这是因为所有内容最初都是使用CSS隐藏的。我们通过获取相对于它的直接父级的内容索引来找到相对于选项卡锚的关联选项卡内容（注意，索引显然是此处的关键）。

HTML结构与我的解决方案基于的示例完全相同，除了您不需要为嵌套选项卡集指定特殊类;现在，您只需使用三个主要类：tabs，tabs-content和active。

带有jQuery / CSS的嵌套选项卡菜单

2 个答案: