Javascript jquery在一个页面上进行多个选项卡导航

目前，我在一个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>

只要您有一个像rightContent这样的div（或任何其他内容），这应该可以：

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

---

您想要的是类似于

$（currenttabselector+'.tab'）.hide（）的内容，但需要更多的上下文来提供帮助。您建议如何扩展它？我的jquery非常基本，也就是说，按照上面的标准，问题是我无法准确地想象您的选项卡结构在DOM中的外观。你是否有各种各样的标签，每个标签都有自己的导航，或者你在标签中有标签，或者你在一个页面上有各种各样的标签，或者什么：谢谢，我刚刚添加了htmlWhy你回复了我发布的几乎相同的答案？+
.rightContent
类对于每个选项卡导航（更确切地说是容器）可能都不相同）+find可以在jquery内部优化，而子级则不能。
$('.tabsNav li a').click(function(){
                   $(this).parents('.tabsNav').parents('.rightContent').children('.tab').hide();
                   $($(this).attr('href')).show();
                   return false;
                });