jquery - jQuery: jQuery セレクターのスコープを制限して、子ではない他のセレクターを選択しないようにします

Question

jQuery を使用してコンテンツ シールド (つまり、タブ) を作成しました。そして、それは完璧に機能します。

ページに 2 番目のものを配置し、両方をより大きなコンテンツ シールド内にラップしたいことはわかっています。ただし、最初のリンクをクリックすると、2 番目のリンクが影響を受け始めます。

これは私の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()を使用してセレクターを制限できると思いましたが、それをコードに統合する方法がわからないため、ナビゲーションは独自のセクション内のページのみを選択します。