在1页上jquery多个选项卡导航

Question

目前我在1个html页面上有多个标签导航，当我点击一个导航时，它会影响其他标签导航。

我似乎无法弄清楚如何在不隐藏其他标签导航内容的情况下影响我点击的标签导航。

这是我的jquery代码

// thumbs click
                $('.tabsNav li a').click(function(){
                    $('.tab').hide();
                    $($(this).attr('href')).show();
                    return false;
                });

继续我的html，我想在页面上多次使用

<div class="rightContent">
                    <ul class="tabsNav clearfix">
                        <li>
                            <a href="#vlogs">vlogs</a>
                        </li>
                        <li>
                            <a href="#miniDocs">mini-docs</a>
                        </li>
                        <li>
                            <a href="#trailers">trailers</a>
                        </li>
                    </ul>
                    <div id="vlogs" class="tab">

                    </div>
                    <div id="miniDocs" class="tab">

                    </div>
                    <div id="trailers" class="tab">

                    </div>
                </div>

Answer 1

只要你有一个div就像它周围的rightContent（或其他任何东西），这应该有效：

$('.tabsNav li a').click(function(){
   $(this).parents('tabsNav').parent().find('.tab').hide();
   $($(this).attr('href')).show();
   return false;
});

Answer 2

$('.tabsNav li a').click(function(){
                   $(this).parents('.tabsNav').parents('.rightContent').children('.tab').hide();
                   $($(this).attr('href')).show();
                   return false;
                });