Question

我正在创建将标签内容放在我的网页上的代码。代码创建选项卡，单击时，显示和隐藏它们下面的内容。活动标签alos变为白色，而不活动标签变为灰色。

标签内容效果很好，但是，我需要能够在同一页面上放置多组标签内容。

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

我需要分别对每组标签进行更改。

我这里有一个小提琴：

这是我遇到问题的功能：

$(".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定位有关，但我不确定如何实现这一点。

Answer 1

您需要限制选择器的范围，例如 see updated fiddle here

        $(".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;
           }
        });

Answer 2

您可以将每个组的标签和内容放入一个div中，然后通过$(this).parent().find(...)

遍历该div的元素

Answer 3

更改以下内容：

$(".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相关的特定项目的最简单方法。与$(this).parent();

不同，它还允许您根据需要添加多个图层

See the JSFiddle here.

当有多个同一类时，针对特定的UL？

3 个答案: