0

我正在创建将选项卡式内容放置在我的页面上的代码。该代码会创建选项卡，当单击这些选项卡时，会显示和隐藏其下方的内容。活动选项卡 alos 变为白色，而非活动选项卡变为灰色。

选项卡内容效果很好，但是，我需要能够在同一页面上放置一组以上的选项卡内容。

当我有多个选项卡时，当您单击任一组时，都会导致两者中的内容都受到影响。两个组中的活动白色选项卡都被清除，每个组下面的内容被隐藏。

我需要对每组选项卡分别进行更改。

我在这里链接了一个小提琴：

http://jsfiddle.net/4bsdt/

这是我遇到问题的功能：

$(".myTabz li").click(function() {
                taby = $(this);
        tabyHas = taby.hasClass('active');
        if (!tabyHas){
     //I WANT ONLY THE CURRENT GROUP OF TABS TO BE CLEARED OF THE ACTIVE CLASS
        $(".myTabz li").removeClass('active');
                    // NOT WORKING $(this).find('.myTabz li').removeClass('active');
                $(this).addClass("active");
    //I only want content in the current group of tabs to disappear and reappear
        $(".tabz_content").hide();
        var focused =  $(this).find("a").attr("href");
        $(focused).fadeIn();
        return false;
        }

您会看到我有两组选项卡，一组有 4 个选项卡，一组有两个。当您单击任一组时，内容将从另一个组中清除...

我知道它必须与定位用户当前在里面点击的 UL 有关，但我不确定如何实现这一点。

4

3 回答 3

1

您需要限制选择器的范围，如下所示， 请参见此处更新的小提琴

        $(".myTabz li").click(function () {
           taby = $(this);
           tabyHas = taby.hasClass('active');
           if (!tabyHas) {

              //***This line gets container of the current clicked "li"***
              var cntnr = $(this).closest('.wrapper');

              //***this line restricts scope of selector to container only***
              $(".myTabz li", cntnr).removeClass('active');

              //$(this).find('.myTabz li').removeClass('active');

              $(this).addClass("active");

              //I only want content in the current group of tabs to disappear and reappear
              //***this restricts the selector to the container only***
              $(".tabz_content", cntnr).hide();

              var focused = $(this).find("a").attr("href");
              $(focused).fadeIn();
              return false;
           }
        });
于 2013-05-07T13:34:36.103 回答
0

您可以将每个组的选项卡和内容放入一个 div 并通过该 div 遍历元素$(this).parent().find(...)

于 2013-05-07T13:35:58.247 回答
0

更改以下内容：

  • $(".myTabz li").removeClass('active');变成$(this).closest(".myTabz").find("li").removeClass('active');
  • $(".tabz_content").hide();变成$(this).closest(".wrapper").find(".tabz_content").hide();

您需要围绕li您单击的特定对象定位对象。$(this).closest()是查找与您单击的 .myTabz li 相关的特定项目的最简单方法。它还允许您根据需要向上走尽可能多的层，不像$(this).parent();

请参阅此处的 JSFiddle。

于 2013-05-07T13:39:54.890 回答