内容选项卡内容选项卡jquery

Question

我有fiddle这个tab content我的问题是我应该如何插入另一组tab content。

JS

$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

})

下面的图片展示了我想要实现的目标希望这是有意义的

Answer 1

检查in this fiddle以查找问题的解决方案。我们的想法是停止将嵌套选项卡组的click事件传播到父选项卡组。因此，我在click事件中使用 e.stopPropagation（）函数。这可以防止父选项卡组的单击事件以及子选项卡组的正确功能。希望它有所帮助！

('ul.tabs2 li').click(function(e){
    e.stopPropagation();
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs2 li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
})

Answer 2

http://www.adipalaz.com/experiments/jquery/nested_accordion_demo.html

这是手风琴中手风琴的一个很好的例子。

希望这有帮助！