Несколько вкладок Выпуск

Question

У меня есть следующая скрипка: http://jsfiddle.net/7bt4f8zk/

В принципе, я пытаюсь иметь несколько вкладок работать, и по большей части, они есть.

Однако по какой-либо причине при нажатии новой вкладки на второй (например), она копирует содержимое в первую очередь, хотя оно должно работать только во втором.

Мой JQuery выглядит следующим образом:

$(document).ready(function() { 
    $(".tabs-menu a").click(function(event) { 
    event.preventDefault(); 
    $(this).parent().addClass("current"); 
    $(this).parent().siblings().removeClass("current"); 
    var tab = $(this).data("tab"); 
    $(".tab-content").not(tab).css("display", "none"); 
    $(tab).fadeIn(); 
    }); 
}); 

Answer 1

Я просто отрегулировать свой Fiddle со следующими корректировками:

$(document).ready(function() { 
    $(".tabs-menu a").click(function (event) { 
    event.preventDefault(); 
    $(this).parent().addClass("current"); 
    $(this).parent().siblings().removeClass("current"); 
    var tab = $(this).data("tab"); 
    $(this).closest(".tabs-container").find(".tab-content"). 
      not(tab).css("display", "none"); 
    $(tab).fadeIn(); 
    }); 
}); 

, а также скорректировали data-tab значения для второго tabs-container, чтобы избежать дублей.

Основное изменение заключается в изменении

$(".tab-content").not(tab).css("display", "none"); 

в

$(this).closest(".tabs-container").find(".tab-content"). 
      not(tab).css("display", "none"); 

поэтому изменения на одной вкладки-контейнера влияет только на текущий, а не оба.

Для CSS я добавил переименованный .tab-4 (первую вкладку второй вкладки-контейнер) в

.tab-1, .tab-4 { 
    display: block; 
} 

поэтому первые язычки обоих контейнеров отображаются на начальном этапе.