多个标签问题

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的{​​{1}}值以避免双倍。

主要调整是改变

tabs-container

到

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

因此，一个标签容器上的更改只影响当前而不是两者。

对于CSS，我已将重命名的$(this).closest(".tabs-container").find(".tab-content"). not(tab).css("display", "none"); （第二个标签容器的第一个标签）添加到

.tab-4

所以最初显示两个容器的第一个选项卡。