我很难搞清楚为什么我的标签式ID无法正常工作或运行应该如此。在点击时，它应该用不同的东西替换文本（即正在构建的页面）。
这是我到目前为止所拥有的......
HTML
<!doctype html>
<html>
<head>
<title>Main Page</title> <!--main page title -->
<script type="text/javascript" scr="home_page.js"></script>
<link rel="stylesheet" type="text/css" href="home_page.css"/>
</head>
<body>
<h1> Express Shop </h1>
<div class="content">
<div class="navbar">
<ul>
<li><a href="#" title="Home" class="active">Home</a></li>
<li><a href="#" title="Inventory">Inventory</a></li>
<li><a href="#" title="Directions">Directions</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</div>
<div id="tab1" class="tab active">
<h3>Welcome to Express Shop!</h3>
<p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
<p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
</div>
<div id="tab2" class="tab">
<h3>Inventory</h3>
<p>Page Under Construction<p>
</div>
<div id="tab3" class="tab">
<h3>Directions</h3>
<p>Page Under Construction</p>
</div>
<div id="tab4" class="tab">
<h3>Contact Us</h3>
<p>Page Under Construction</p>
</div>
</div>
</body>
</html>
CSS
h1 {
font:bold 65px/60px Helvetica, Arial, Sans-serif;
text-shadow:0px 2px 6px #333;
}
.content p {
margin:20px;
}
.tab { /*turn off display of all tabs(in-active) */
display:none;
}
.navbar {
position:relative;
margin:0px 0px 0px -40px;
/*border around tabs */
}
.navbar ul {
list-style:none;
}
.navbar ul li {
display:inline-block;
}
.navbar ul li:first-child a {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
.navbar ul li:last-child a {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
.navbar ul li a {
text-decoration:none;
font:bold 14px Helvetica, Sans-Serif;
padding:10px;
margin-right:-7px;
/*border-radius:3px; */
background-color:#E0E0E0;
transition:all linear 0.15s;
}
.navbar ul li a:hover {
background-color:rgb(255, 173, 10);
}
/* needs to be fixed */
.navbar ul li a.active {
background-color:rgb(255, 173, 10);
}
.tab.active {
display:inherit;
clear:both;
margin-top:-7px;
border:1px solid black;
width:700px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
h3 {
text-transform:uppercase;
padding:10px 0px 0px 10px;
color:black
text-shawdow:#000 0px 0px 2px;
}
的JavaScript
$(home_page.html).ready(function() {
$('navbar ul li a').click(function() {
var tab_id =$(this).attr('href');
$('navbar ul li a').removeClass('active');
$('tab').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
});
答案 0 :(得分：7)
问题：
$(document).ready - 这会使您的代码在加载页面时运行class，则需要在其前面添加.（就像CSS一样），例如$('navbar ul li a')应为$('.navbar ul li a') href="#"，您需要输入正确的id标签（例如#tab1），因为您已经拥有#在这里，您不再需要$(tab_id) 我修复了您的代码，您可以尝试下面的工作版本：
$(document).ready(function() {
$('.navbar ul li a').click(function() {
var tab_id = $(this).attr('href');
$('.navbar ul li a').removeClass('active');
$('.tab').removeClass('active');
$(this).addClass('active');
$(tab_id).addClass('active');
});
});h1 {
font:bold 65px/60px Helvetica, Arial, Sans-serif;
text-shadow:0px 2px 6px #333;
}
.content p {
margin:20px;
}
.tab { /*turn off display of all tabs(in-active) */
display:none;
}
.navbar {
position:relative;
margin:0px 0px 0px -40px;
/*border around tabs */
}
.navbar ul {
list-style:none;
}
.navbar ul li {
display:inline-block;
}
.navbar ul li:first-child a {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
.navbar ul li:last-child a {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
.navbar ul li a {
text-decoration:none;
font:bold 14px Helvetica, Sans-Serif;
padding:10px;
margin-right:-7px;
/*border-radius:3px; */
background-color:#E0E0E0;
transition:all linear 0.15s;
}
.navbar ul li a:hover {
background-color:rgb(255, 173, 10);
}
/* needs to be fixed */
.navbar ul li a.active {
background-color:rgb(255, 173, 10);
}
.tab.active {
display:inherit;
clear:both;
margin-top:-7px;
border:1px solid black;
width:700px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
h3 {
text-transform:uppercase;
padding:10px 0px 0px 10px;
color:black
text-shawdow:#000 0px 0px 2px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Express Shop </h1>
<div class="content">
<div class="navbar">
<ul>
<li><a href="#tab1" title="Home" class="active">Home</a></li>
<li><a href="#tab2" title="Inventory">Inventory</a></li>
<li><a href="#tab3" title="Directions">Directions</a></li>
<li><a href="#tab4" title="Contact Us">Contact Us</a></li>
</ul>
</div>
<div id="tab1" class="tab active">
<h3>Welcome to Express Shop!</h3>
<p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
<p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
</div>
<div id="tab2" class="tab">
<h3>Inventory</h3>
<p>Page Under Construction<p>
</div>
<div id="tab3" class="tab">
<h3>Directions</h3>
<p>Page Under Construction</p>
</div>
<div id="tab4" class="tab">
<h3>Contact Us</h3>
<p>Page Under Construction</p>
</div>
</div>