多個選項卡發行

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

等一個接片容器的變化隻影響當前和不能同時使用。

對於我已經添加了更名.tab-4（第二接線片，容器的第一標籤）的CSS來

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

所以兩個容器的第一接線片最初顯示。