嵌套标签菜单与jQuery / CSS

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

这是一个工作演示

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。