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

我必须做一个关于统计的网站，因此我需要一个4级嵌套选项卡菜单。日期/路线/类别/分类

在这里，我找到了两个级别的内容，但我无法更改更多级别： 我希望有人能找到解决办法：

非常感谢

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

---

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

JS:

这是一张工作票

---

可以更合理地减少冗余代码。

基于@karan3112的回答，我能够想出一个更好的解决方案，它支持无限嵌套。下面的脚本相对定位适当的元素，而不需要额外的类，如tab\u content\u inner

首先，如果每个“选项卡集”都有一个活动的选项卡，那么我们将显示该选项卡。这是因为所有内容最初都是使用CSS隐藏的。通过获取内容相对于其直接父注释的索引，我们可以找到与选项卡锚相关联的选项卡内容，索引显然是这里的关键

---

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

谢谢，看起来真不错！我这里的问题是，我有一个像这样的日期选择器。因此，使用您的代码，我必须为每天创建嵌套的div。你知道更好的处理方法吗？

<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>

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

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