Question

我使用jQuery制作了内容屏蔽（即制表符）。而且效果很好。

我知道要在页面上放置第二个，然后将它们包装在更大的内容屏蔽中。但是，当您单击第一个链接时，它会开始影响第二个链接。

这是我的HTML概述

<div class="taptabs pages">
  <nav class="content-follower tapnav ui-ticklist cr-nav"> [UL NAVIGATION TO SWITCH BETWEEN CONTENT SHIELD 1 & 2] </nav>
  <div class="taptabs page">
    <nav class="content-follower tapnav ui-ticklist cr-nav"> [UL TABS FOR CONTENT SHEILD 1]
      </ul>
    </nav>
    <div class="pages">
      <div class="page">
        CONTENT SHEILD 1 - Section a
      </div>
      <div class="page">
        CONTENT SHEILD 1 - Section b
      </div>
    </div>
  </div>
  <div class="taptabs page">
    <nav class="content-follower tapnav ui-ticklist cr-nav"> [UL TABS FOR CONTENT SHEILD 2]
      </ul>
    </nav>
    <div class="pages">
      <div class="page">
        CONTENT SHEILD 2 - Section a
      </div>
      <div class="page">
        CONTENT SHEILD 2 - Section b
      </div>
    </div>
  </div>
</div>

这是我的jQuery：

(function ($) {
$(document).ready(function () {

    $(".taptabs .tapnav li").live('click', function () {
        $(".page").hide().eq($(this).index()).show().addClass("animated").addClass("fadeInLeft");
    }).eq(0).addClass('selected');

});

})(jQuery);

HERE IS JSFIDDLE

显然，问题是taptabs / tapnav类并不是每个部分都特定的。我以为我可以使用Closest()或children()来限制选择器，但我不确定如何将其集成到代码中，因此导航只会在其自己的部分中选择页面。

Answer 1

你可以试试这个。在click事件中，您将获得正确的父级并使用它来过滤.page选择器。

$(".taptabs .tapnav li").on('click', function()
        {
            taptab = $(this).parents(".taptabs").get(0);

            $(".page",taptab).hide().eq($(this).index()).show().addClass("animated").addClass("fadeInLeft");
        }).eq(0).addClass('selected');

        });

http://jsfiddle.net/vNfRA/1/

Answer 2

您需要在初始jQuery选择器中更具体。使用CSS表示法，您可以使用“＆gt;” （大于号）指定你只是在寻找直接的孩子

(function ($) {
    $(document).ready(function () {
        $(document).on('click', ".taptabs > .tapnav > ul > li", function () {
            $(".page").hide().eq($(this).index()).show().addClass("animated").addClass("fadeInLeft");
        }).eq(0).addClass('selected');
    });
})(jQuery);

编辑：我以前使用.live与原始海报保持一致，但.live已弃用而不赞成.on（），所以我相应地改变了这个答案

jQuery：限制jQuery选择器的范围，以避免选择其他非子节点选择器

2 个答案: