如何解决嵌套选项卡库问题
我想创建一个两排的画廊。第一行或顶级导航选择位置，第二行选择将在下方显示为滑块库的内容。但是正如你所看到的，在我下面的失败中，如果第一行的选择发生变化，我无法让第二行隐藏其内容。
我会试着用一个例子来澄清这一点。如果您选择：Phoenix > 360 Tour，然后选择 Golf > Beach both show 当我希望 Phoenix > 360 Tour 在选择 Golf、Dutch 或任何其他顶级导航选项时隐藏。
您可以在此处查看：https://codepen.io/brendanhickey/pen/MWjXmWL
任何帮助将不胜感激。我对 html 和 css 很熟悉，但 javascript 对我来说是一个挑战。我一次只学习一点点。不明白如何实现这一点真是令人沮丧..
非常感谢您抽出时间阅读本文。
HTML 部分：
<div class="container">
<h2>gallery</h2>
<p>Check out all of our stunning Caribbean resorts!</p>
<!-- main nav START -->
<ul class="nav nav-pills nav-justified mainNav">
<li class="active"><a data-toggle="tab" class="btn" href="#phx">Phoenix</a></li>
<li><a data-toggle="tab" href="#glf">Golf</a></li>
<li><a data-toggle="tab" href="#dtch">Dutch</a></li>
<li><a data-toggle="tab" href="#sw">Southwinds</a></li>
<li><a data-toggle="tab" href="#flm">Flamingo</a></li>
<li><a data-toggle="tab" href="#lb">Little Bay</a></li>
</ul>
<!-- main nav END -->
<!-- tab-content START -->
<div class="tab-content">
<!-- tab-content START -->
<!-- phx content START-->
<div class="tab-pane active" id="phx">
<p>I'm in Section 1.</p>
<!-- phx sub nav START-->
<ul class="nav nav-pills nav-justified fade in active">
<li class="active"><a data-toggle="tab" href="#360phx">360 Tour</a></li>
<li><a data-toggle="pill" href="#beachphx">Beach</a></li>
<li><a data-toggle="pill" href="#poolsphx">Pools</a></li>
<li><a data-toggle="pill" href="#roomsphx">Rooms</a></li>
<li><a data-toggle="pill" href="#gymphx">Gym</a></li>
<li><a data-toggle="pill" href="#spaphx">Spa</a></li>
<li><a data-toggle="pill" href="#restaurantsphx">Restaurants</a></li>
<li><a data-toggle="pill" href="#videosphx">Videos</a></li>
<li><a data-toggle="pill" href="#brochuresphx">brochures</a></li>
<li><a data-toggle="pill" href="#mapsphx">Maps</a></li>
<li><a data-toggle="pill" href="#eventsphx">Events</a></li>
</ul>
<!-- phx sub nav END -->
</div>
<!-- phx content END -->
<!-- glf content START-->
<div class="tab-pane" id="glf">
<p>Howdy,I'm in Section 2.</p>
<!-- glf sub nav START-->
<ul class="nav nav-pills nav-justified fade in active">
<li class="active"><a data-toggle="tab" href="#360glf">360 Tour</a></li>
<li><a data-toggle="pill" href="#beachglf">Beach</a></li>
<li><a data-toggle="pill" href="#poolsglf">Pools</a></li>
<li><a data-toggle="pill" href="#roomsglf">Rooms</a></li>
<li><a data-toggle="pill" href="#gymglf">Gym</a></li>
<li><a data-toggle="pill" href="#spaglf">Spa</a></li>
<li><a data-toggle="pill" href="#restaurantsglf">Restaurants</a></li>
<li><a data-toggle="pill" href="#videosglf">Videos</a></li>
<li><a data-toggle="pill" href="#brochuresglf">brochures</a></li>
<li><a data-toggle="pill" href="#mapsglf">Maps</a></li>
<li><a data-toggle="pill" href="#eventsglf">Events</a></li>
</ul>
<!-- glf sub nav END -->
</div>
<!-- glf content END -->
<!-- dtch content START-->
<div class="tab-pane" id="dtch">
<p>Howdy,I'm in Section 3.</p>
<!-- dtch sub nav START-->
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="tab" href="#360dtch">360 Tour</a></li>
<li><a data-toggle="pill" href="#beachdtch">Beach</a></li>
<li><a data-toggle="pill" href="#poolsdtch">Pools</a></li>
<li><a data-toggle="pill" href="#roomsdtch">Rooms</a></li>
<li><a data-toggle="pill" href="#gymdtch">Gym</a></li>
<li><a data-toggle="pill" href="#spadtch">Spa</a></li>
<li><a data-toggle="pill" href="#restaurantsdtch">Restaurants</a></li>
<li><a data-toggle="pill" href="#videosdtch">Videos</a></li>
<li><a data-toggle="pill" href="#brochuresdtch">brochures</a></li>
<li><a data-toggle="pill" href="#mapsdtch">Maps</a></li>
<li><a data-toggle="pill" href="#eventsdtch">Events</a></li>
</ul>
<!-- dtch sub nav END -->
</div>
<!-- dtch content END -->
<!-- sw content START-->
<div class="tab-pane" id="sw">
<p>Howdy,I'm in Section 4.</p>
<!-- sw sub nav START-->
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="tab" href="#360sw">360 Tour</a></li>
<li><a data-toggle="pill" href="#beachsw">Beach</a></li>
<li><a data-toggle="pill" href="#poolssw">Pools</a></li>
<li><a data-toggle="pill" href="#roomssw">Rooms</a></li>
<li><a data-toggle="pill" href="#gymsw">Gym</a></li>
<li><a data-toggle="pill" href="#spasw">Spa</a></li>
<li><a data-toggle="pill" href="#restaurantssw">Restaurants</a></li>
<li><a data-toggle="pill" href="#videossw">Videos</a></li>
<li><a data-toggle="pill" href="#brochuressw">brochures</a></li>
<li><a data-toggle="pill" href="#mapssw">Maps</a></li>
<li><a data-toggle="pill" href="#eventssw">Events</a></li>
</ul>
<!-- sw sub nav END -->
</div>
<!-- sw content END -->
<!-- flm content START-->
<div class="tab-pane" id="flm">
<p>Howdy,I'm in Section 5.</p>
<!-- flm sub nav START-->
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="tab" href="#360flm">360 Tour</a></li>
<li><a data-toggle="pill" href="#beachflm">Beach</a></li>
<li><a data-toggle="pill" href="#poolsflm">Pools</a></li>
<li><a data-toggle="pill" href="#roomsflm">Rooms</a></li>
<li><a data-toggle="pill" href="#gymflm">Gym</a></li>
<li><a data-toggle="pill" href="#spaflm">Spa</a></li>
<li><a data-toggle="pill" href="#restaurantsflm">Restaurants</a></li>
<li><a data-toggle="pill" href="#videosflm">Videos</a></li>
<li><a data-toggle="pill" href="#brochuresflm">brochures</a></li>
<li><a data-toggle="pill" href="#mapsflm">Maps</a></li>
<li><a data-toggle="pill" href="#eventsflm">Events</a></li>
</ul>
<!-- flm sub nav END -->
</div>
<!-- flm content END -->
<!-- lb content START-->
<div class="tab-pane" id="lb">
<p>Howdy,I'm in Section 6.</p>
<!-- lb sub nav START-->
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="tab" href="#360lb">360 Tour</a></li>
<li><a data-toggle="pill" href="#beachlb">Beach</a></li>
<li><a data-toggle="pill" href="#poolslb">Pools</a></li>
<li><a data-toggle="pill" href="#roomslb">Rooms</a></li>
<li><a data-toggle="pill" href="#gymlb">Gym</a></li>
<li><a data-toggle="pill" href="#spalb">Spa</a></li>
<li><a data-toggle="pill" href="#restaurantslb">Restaurants</a></li>
<li><a data-toggle="pill" href="#videoslb">Videos</a></li>
<li><a data-toggle="pill" href="#brochureslb">brochures</a></li>
<li><a data-toggle="pill" href="#mapslb">Maps</a></li>
<li><a data-toggle="pill" href="#eventslb">Events</a></li>
</ul>
<!-- lb sub nav END -->
</div>
<!-- lb content END -->
<!-- tab-content END -->
</div>
<!-- tab-content END -->
<!-- tab-content START -->
<div class="tab-content">
<!-- tab-content START -->
<!-- phx content START-->
<div class="tab-pane" id="360phx">
<p>Content for Phoenix 360 Tour</p>
</div>
<!-- phx content END -->
<!-- glf content START-->
<div class="tab-pane" id="beachphx">
<p>Content for Phoenix Beach</p>
</div>
<!-- glf content END -->
<!-- dtch content START-->
<div class="tab-pane" id="poolsphx">
<p>Content for Phoenix Pools</p>
<!-- tab-content END -->
</div>
<!-- tab-content END -->
<!-- tab-content START -->
<div class="tab-content">
<!-- tab-content START -->
<!-- phx content START-->
<div class="tab-pane" id="360glf">
<p>Content for Golf 360s</p>
</div>
<!-- phx content END -->
<!-- glf content START-->
<div class="tab-pane" id="beachglf">
<p>Content for Golf Beach</p>
</div>
<!-- glf content END -->
<!-- dtch content START-->
<div class="tab-pane" id="poolsglf">
<p>Content for Golf Pools</p>
<!-- tab-content END -->
</div>
<!-- tab-content END -->
<!-- container END -->
</div>
<!-- container END -->
CSS 部分：
.mainNav a {
font-size: 130%;
}
JS 部分：
$("[data-toggle=tab]").click(function () {
if ($(this).parent().hasClass("active")) {
$($(this).attr("href")).toggleClass("active");
}
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
