javascript - jquery 1页上的多个选项卡导航

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

只要您有一个像 rightContent 围绕它的 div（或其他任何东西），这应该可以工作：

$('.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;
                });