2

我用 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);

这是 JSFIDDLE

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

4

2 回答 2

1

你可以试试这个。在单击事件上，您获得正确的父级并使用它来过滤 .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/

于 2013-08-07T15:48:17.257 回答
0

您需要在初始 jQuery 选择器中更加具体。使用 CSS 表示法，您可以使用“>”（大于号）来指定您只寻找直接子代

(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()，所以我相应地更改了这个答案

于 2013-08-07T15:42:13.237 回答