javascript - 如何使当前单击的选项卡的内容始终显示在不同的容器中？

Question

这是我的代码的链接[ https://jsfiddle.net/vmzttpok/7/][1]

$(document).ready(function(){

$('#link').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('#link').removeClass('current');
      $('.tab-content').removeClass('current');

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

})

问题是当我单击不同容器中的选项卡时，内容会在其他容器中消失...

Answer 1

由于您使用相同的类名，我们必须使用 $(this) 实现逻辑，基于此我们可以仅将更改应用于特定容器。

 $(document).ready(function(){
        $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        $(this).parent().find('li').removeClass('current');
        $(this).parent().siblings(".tab-content").removeClass('current');
            $(this).addClass('current');
            $("#"+tab_id).addClass('current');
        })
    })

欲了解更多信息，请访问 - https://jsfiddle.net/vmzttpok/9/