jQuery内容控制器未正确显示和隐藏内容
在过去的几天里，我一直在尝试制作一个导航栏，但我似乎遇到了很多问题。现在我的问题是jQuery，它没有按我希望的方式运行： 我想一个单页网站，所以每当我点击一个导航栏，当前页面应该隐藏，目标页面应该显示。现在，有些页面仍然叠在一起，有人能帮我吗 HTML代码jQuery内容控制器未正确显示和隐藏内容,jquery,html,css,Jquery,Html,Css,在过去的几天里，我一直在尝试制作一个导航栏，但我似乎遇到了很多问题。现在我的问题是jQuery，它没有按我希望的方式运行： 我想一个单页网站，所以每当我点击一个导航栏，当前页面应该隐藏，目标页面应该显示。现在，有些页面仍然叠在一起，有人能帮我吗 HTML代码 <!DOCTYPE html> <html> <head> <title>Yu-Gi-Oh! Stash</title> <link
<!DOCTYPE html>
<html>
<head>
<title>Yu-Gi-Oh! Stash</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="scripts/contentcontroller.js"></script>
<script src="scripts/navbar.js"></script>
<meta charset="utf-8">
</head>
<body>
<section>
<nav>
<ul>
<li class="active"><a href="#decks">Decks ▾</a>
<ul>
<li><a href="#decks_starter-decks">Starter Decks</a></li>
<li><a href="#decks_structure-decks">Structure Decks</a></li>
</ul>
</li>
<li><a href="#booster-packs">Booster Packs ▾</a>
<ul>
<li><a href="#booster-packs_booster-sets">Booster Sets</a></li>
<li><a href="#booster-packs_special-edition">Special Editions</a></li>
<li><a href="#booster-packs_duelist-packs">Duelist Packs</a></li>
<li><a href="#booster-packs_master-collections">Master Collections</a></li>
</ul>
</li>
<li><a href="#torunament-awards">Tournament Awards</a></li>
<li><a href="#promotions">Promotions ▾</a>
<ul>
<li><a href="#promotions_video-games">Video Games</a></li>
<li><a href="#promotions_entertainments">Entertainment</a></li>
<li><a href="#promotions_foundations">Foundations</a></li>
</ul>
</li>
</ul>
</nav>
<section id="decks" class="tab-content active">
<h1 class="page-heading">Decks</h1>
<p>lorem ipsum..</p>
</section>
<section id="decks_starter-decks" class="tab-content hide">
<h1 class="page-heading">Starter Decks</h1>
<p>lorem ipsum..</p>
</section>
<section id="decks_structure-decks" class="tab-content hide">
<h1 class="page-heading">Structure Decks</h1>
<p>lorem ipsum..</p>
</section>
<section id="booster-packs" class="tab-content hide">
<h1 class="page-heading">Booster Packs</h1>
<p>lorem ipsum..</p>
</section>
<section id="booster-packs_booster-sets" class="tab-content hide">
<h1 class="page-heading">Booster Sets</h1>
<p>lorem ipsum..</p>
</section>
<section id="booster-packs_special-edition" class="tab-content hide">
<h1 class="page-heading">Special Edition</h1>
<p>lorem ipsum..</p>
</section>
<section id="booster-packs_duelist-packs" class="tab-content hide">
<h1 class="page-heading">Duelist Packs</h1>
<p>lorem ipsum..</p>
</section>
<section id="booster-packs_master-collections" class="tab-content hide">
<h1 class="page-heading">Master Collections</h1>
<p>lorem ipsum..</p>
</section>
<section id="torunament-awards" class="tab-content hide">
<h1 class="page-heading">Tournament Awards</h1>
<p>lorem ipsum..</p>
</section>
<section id="promotions" class="tab-content hide">
<h1 class="page-heading">Promotions</h1>
<p>lorem ipsum..</p>
</section>
<section id="promotions_video-games" class="tab-content hide">
<h1 class="page-heading">Video Game Promotions</h1>
<p>lorem ipsum..</p>
</section>
<section id="promotions_entertainments" class="tab-content hide">
<h1 class="page-heading">Magazine, Movie & McDonalds Promotions</h1>
<p>lorem ipsum..</p>
</section>
<section id="promotions_foundations" class="tab-content hide">
<h1 class="page-heading">Foundations</h1>
<p>lorem ipsum..</p>
</section>
</section>
<footer>
</footer>
</body>
</html>
/***************************
***Navbar click function***
***************************/
$(document).ready(function() {
$('nav li > a').click(function(event) {
event.preventDefault();
//declare current tab content
var current_tab_content = $('nav li.active > a').attr('href');
//hide current tab content
$(current_tab_content).removeClass('active').addClass('hide');
//show targeted tab content
var targeted_tab_content = $(this).attr('href');
$(targeted_tab_content).removeClass('hide').addClass('active');
//remove 'active' from current navbar
var current_navbar = $('nav li.active');
$(current_navbar).removeClass('active');
//add 'active' to clicked navbar
$(this).parents('li').last().addClass('active');
});
});
在单击导航几次之后，看起来您最终会看到多个类为“active”的部分 尝试先隐藏所有部分，然后显示所需部分，而不是一次隐藏一个选项卡：
$('.tab-content').removeClass('active').addClass('hide');
$(targeted_tab_content).addClass('active').removeClass('hide');
如果您在下拉列表中选择的页面高于上一个页面，则页面会堆叠。例如，如果你在结构甲板上，点击初学者甲板。你是对的，你的解决方案几乎为我做到了。为了让它工作，我从所有.tab内容中删除了“活动”，同时在所有.tab内容中添加了“隐藏”，然后它工作了！谢谢
$('.tab-content').removeClass('active').addClass('hide');
$(targeted_tab_content).addClass('active').removeClass('hide');