0
這是我第二次問一個問題，這個問題之前已經問過很多次了，但不幸的是，我永遠無法找到解決我的問題的方法。導航jQuery不工作
我有一個導航欄，我想製作一個HTML網站，所以我正在嘗試編寫一個jQuery腳本來在我的網站上顯示&隱藏部分。我無法找到問題，爲什麼它不能自行工作，所以如果任何人都可以請幫助我？
HTML代碼
<!DOCTYPE html>
<html>
<head>
<title>Yu-Gi-Oh! Stash</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="scripts/contentcontroller.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>
<footer>
</footer>
</body>
</html>
CSS代碼
body, html {
padding: 0;
margin: 0;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p {
padding: 0;
margin: 35px 25px 25px 25px;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0;
text-transform: capitalize;
}
section {
padding: 0;
margin: auto;
width: 85%;
height: 1000px;
border: 1px solid grey;
}
.page-heading {
margin: 80px 0px 80px 0px;
text-align: center;
color: #505050;
text-shadow: -1px -1px 0px #555;
}
/********************
***NAVIGATION BAR***
********************/
nav {
position: fixed;
width: inherit;
margin: -2px 0px 0px -2px;
list-style-type: none !important;
background-color: #F0F0F0;
border: 2px solid #E0E0E0;
border-top: none;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
nav ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 8px;
padding-bottom: 0;
}
nav ul li {
width: auto;
position: relative;
float: left;
margin-right: 25px;
padding: 0;
border: 1px solid #F0F0F0;
border-bottom: none;
}
nav ul li.active > a {
color: #00688B;
background: #DDD;
}
nav ul li:hover > a {
color: #00688B;
background: #FFF;
}
nav ul a:link, a:visited {
display: block;
color: #0099CC;
text-decoration: none;
text-transform: capitalize;
font-weight: 600;
font-size: 15px;
line-height: 32px;
padding: 0 15px;
background-color: #F6F6F6;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
}
nav ul ul li {
float: none;
width: 125%;
border-bottom: 1px solid #F0F0F0;
border-top: none;
}
nav ul ul a {
line-height: 120%;
padding: 10px 15px;
}
nav ul ul ul {
top: 0;
left: 100%;
}
nav ul li:hover > ul {
display: block;
}
/*************
***CONTENT***
*************/
.tab-content.hide {
display: none;
}
.tab-content.active {
display: block;
}
jQuery代碼
$(document).ready(function() {
$('nav > li').click(function(event){
event.preventDefault();
//declare current tab content
var current_tab_content = $('nav > li.active > a').attr('href');
//remove 'active' from current navbar
var current_navbar = $('nav > li.active');
current_navbar.removeClass('active');
//add 'active' to clicked navbar
$(this).parents('li').addClass('active');
//hide current tab content
$(current_tab_content).removeClass('active');
$(current_tab_content).addClass('hide');
//show targeted tab content
var targeted_tab_content = $(this).attr('href');
$(targeted_tab_content).addClass('hide');
$(targeted_tab_content).addClass('active');
});
});
謝謝，我做到了！ –