我试图为我的DOM类（初学者）完成这个小项目。我认为我的语法已关闭。基本上，我们要创建一个带有内部导航的1页网站。单击菜单项时，隐藏其他内容，仅显示单击的内容。很简单，但我似乎无法使用我的语法来处理ID。
这就是我所拥有的。谢谢！
$(document).ready(function(){
$('#cats').click(function(){
$('#content1').show(200);
$('#content2','#content3','#content4').hide('fast');
});
$('#food').click(function(){
$('#content2').show(200);
$('#content1','#content3','#content4').hide('fast');
});
$('#fashion').click(function(){
$('#content3').show(200);
$('#content1','#content2','#content4').hide('fast');
});
$('#animals').click(function(){
$('#content4').show(200);
$('#content1','#content2','#content3').hide('fast');
});
});*{
margin: 0 0;
padding:0 0;
}
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: sans-serif;
font-size: 14px;
}
nav {
width: 100%;
height: 40px;
position: fixed;
background-color: silver;
color: #FFFFFF;
text-align: center;
font-size: medium;
padding-top: 30px;
padding-bottom: 10px;
}
#content1 {
height: 500px;
text-align: center;
color: #000000;
padding-top: 80px;
}
#content2 {
height: 500px;
text-align: center;
color: #000000;
}
#content3 {
height: 500px;
text-align: center;
color: #000000;
}
#content4 {
height: 500px;
text-align: center;
color: #000000;
}
a {
color: #ffffff;
text-decoration: none;
}
a:visited {
color:black;
}
a:hover {
color: red;
}
img {
padding: 30px;
border-radius: 100%;
}
section{
width: 1000px;
padding-top: 30px;
margin-left: 150px;
}
ul li{
display:inline-block;
list-style:none;
}<html>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="myscript.js" type="text/javascript"></script>
<nav>
<ul>
<li id="cats"><a href="#content1">Cats</a></li>
<li id="food"><a href="#content2">Food</a></li>
<li id="fashion"><a href="#content3">Fashion</a></li>
<li id="animals"><a href="#content4">Animals</a></li>
</ul>
</nav>
<body>
<section id="content1">
<p><img src="http://lorempixel.com/600/400/cats/"></p>
<p>Vivamus fringilla porttitor justo, ac varius neque tristique a. Duis iaculis augue a interdum pretium. Duis feugiat odio vel tortor tincidunt, in rhoncus lectus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer volutpat id orci et scelerisque. Nulla semper felis a risus egestas scelerisque. Ut tempus aliquam orci, pretium dapibus risus dictum at. Pellentesque consectetur eget est eu pulvinar. Nulla facilisi. Vivamus eu viverra turpis, et dapibus enim.</p></section>
<section id="content2">
<img src="http://lorempixel.com/600/400/food/">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eleifend, libero vitae venenatis vulputate, tortor magna cursus arcu, id viverra est ante ut est. Nulla placerat purus in fermentum lobortis. Integer sit amet dapibus orci.</p>
</section>
<section id="content3">
<img src="http://lorempixel.com/600/400/fashion/">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eleifend, libero vitae venenatis vulputate, tortor magna cursus arcu, id viverra est ante ut est. Nulla placerat purus in fermentum lobortis. Integer sit amet dapibus orci.</p>
</section>
<section id="content4">
<p><img src="http://lorempixel.com/600/400/animals/"></p>
<p>Vivamus fringilla porttitor justo, ac varius neque tristique a. Duis iaculis augue a interdum pretium. Duis feugiat odio vel tortor tincidunt, in rhoncus lectus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer volutpat id orci et scelerisque. Nulla semper felis a risus egestas scelerisque. Ut tempus aliquam orci, pretium dapibus risus dictum at. Pellentesque consectetur eget est eu pulvinar. Nulla facilisi. Vivamus eu viverra turpis, et dapibus enim.</p>
</section>
</body>
</html>
答案 0 :(得分：0)
您应该在相同的引号中使用逗号分隔的选择器 - 您使用它的方式相当于将其他参数而不是选择器传递给您的jQuery对象。
换句话说，它应该是：$('#content1, #content3, #content4').hide('fast');而不是$('#content1','#content3','#content4').hide('fast');。
$(document).ready(function(){
$('#cats').click(function(){
$('#content1').show(200);
$('#content2, #content3, #content4').hide('fast');
});
$('#food').click(function(){
$('#content2').show(200);
$('#content1','#content3','#content4').hide('fast');
});
$('#fashion').click(function(){
$('#content3').show(200);
$('#content1, #content2, #content4').hide('fast');
});
$('#animals').click(function(){
$('#content4').show(200);
$('#content1, #content2, #content3').hide('fast');
});
});*{
margin: 0 0;
padding:0 0;
}
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: sans-serif;
font-size: 14px;
}
nav {
width: 100%;
height: 40px;
position: fixed;
background-color: silver;
color: #FFFFFF;
text-align: center;
font-size: medium;
padding-top: 30px;
padding-bottom: 10px;
}
#content1 {
height: 500px;
text-align: center;
color: #000000;
padding-top: 80px;
}
#content2 {
height: 500px;
text-align: center;
color: #000000;
}
#content3 {
height: 500px;
text-align: center;
color: #000000;
}
#content4 {
height: 500px;
text-align: center;
color: #000000;
}
a {
color: #ffffff;
text-decoration: none;
}
a:visited {
color:black;
}
a:hover {
color: red;
}
img {
padding: 30px;
border-radius: 100%;
}
section{
width: 1000px;
padding-top: 30px;
margin-left: 150px;
}
ul li{
display:inline-block;
list-style:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li id="cats"><a href="#content1">Cats</a></li>
<li id="food"><a href="#content2">Food</a></li>
<li id="fashion"><a href="#content3">Fashion</a></li>
<li id="animals"><a href="#content4">Animals</a></li>
</ul>
</nav>
<body>
<section id="content1">
<p><img src="http://lorempixel.com/600/400/cats/"></p>
<p>Vivamus fringilla porttitor justo, ac varius neque tristique a. Duis iaculis augue a interdum pretium. Duis feugiat odio vel tortor tincidunt, in rhoncus lectus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer volutpat id orci et scelerisque. Nulla semper felis a risus egestas scelerisque. Ut tempus aliquam orci, pretium dapibus risus dictum at. Pellentesque consectetur eget est eu pulvinar. Nulla facilisi. Vivamus eu viverra turpis, et dapibus enim.</p></section>
<section id="content2">
<img src="http://lorempixel.com/600/400/food/">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eleifend, libero vitae venenatis vulputate, tortor magna cursus arcu, id viverra est ante ut est. Nulla placerat purus in fermentum lobortis. Integer sit amet dapibus orci.</p>
</section>
<section id="content3">
<img src="http://lorempixel.com/600/400/fashion/">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eleifend, libero vitae venenatis vulputate, tortor magna cursus arcu, id viverra est ante ut est. Nulla placerat purus in fermentum lobortis. Integer sit amet dapibus orci.</p>
</section>
<section id="content4">
<p><img src="http://lorempixel.com/600/400/animals/"></p>
<p>Vivamus fringilla porttitor justo, ac varius neque tristique a. Duis iaculis augue a interdum pretium. Duis feugiat odio vel tortor tincidunt, in rhoncus lectus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer volutpat id orci et scelerisque. Nulla semper felis a risus egestas scelerisque. Ut tempus aliquam orci, pretium dapibus risus dictum at. Pellentesque consectetur eget est eu pulvinar. Nulla facilisi. Vivamus eu viverra turpis, et dapibus enim.</p>
</section>
优化注释：您的jQuery代码实际上过于冗余，可以通过使用上下文提示简单地减少：
在我的改进示例中，我为所有部分提供了一个公共类。单击<li>时，默认情况下会隐藏所有部分，但会显示ID由其子<a>元素定位的部分。
$(document).ready(function(){
$('nav ul li').click(function() {
// Hide all sections
$('section.content').hide();
// Show only the relevant section
var target = $(this).find('a').attr('href');
$(target).show();
});
});*{
margin: 0 0;
padding:0 0;
}
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: sans-serif;
font-size: 14px;
}
nav {
width: 100%;
height: 40px;
position: fixed;
background-color: silver;
color: #FFFFFF;
text-align: center;
font-size: medium;
padding-top: 30px;
padding-bottom: 10px;
}
#content1 {
height: 500px;
text-align: center;
color: #000000;
padding-top: 80px;
}
#content2 {
height: 500px;
text-align: center;
color: #000000;
}
#content3 {
height: 500px;
text-align: center;
color: #000000;
}
#content4 {
height: 500px;
text-align: center;
color: #000000;
}
a {
color: #ffffff;
text-decoration: none;
}
a:visited {
color:black;
}
a:hover {
color: red;
}
img {
padding: 30px;
border-radius: 100%;
}
section{
width: 1000px;
padding-top: 30px;
margin-left: 150px;
}
ul li{
display:inline-block;
list-style:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li id="cats"><a href="#content1">Cats</a></li>
<li id="food"><a href="#content2">Food</a></li>
<li id="fashion"><a href="#content3">Fashion</a></li>
<li id="animals"><a href="#content4">Animals</a></li>
</ul>
</nav>
<body>
<section class="content" id="content1">
<p><img src="http://lorempixel.com/600/400/cats/"></p>
<p>Vivamus fringilla porttitor justo, ac varius neque tristique a. Duis iaculis augue a interdum pretium. Duis feugiat odio vel tortor tincidunt, in rhoncus lectus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer volutpat id orci et scelerisque. Nulla semper felis a risus egestas scelerisque. Ut tempus aliquam orci, pretium dapibus risus dictum at. Pellentesque consectetur eget est eu pulvinar. Nulla facilisi. Vivamus eu viverra turpis, et dapibus enim.</p></section>
<section class="content" id="content2">
<img src="http://lorempixel.com/600/400/food/">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eleifend, libero vitae venenatis vulputate, tortor magna cursus arcu, id viverra est ante ut est. Nulla placerat purus in fermentum lobortis. Integer sit amet dapibus orci.</p>
</section>
<section class="content" id="content3">
<img src="http://lorempixel.com/600/400/fashion/">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eleifend, libero vitae venenatis vulputate, tortor magna cursus arcu, id viverra est ante ut est. Nulla placerat purus in fermentum lobortis. Integer sit amet dapibus orci.</p>
</section>
<section class="content" id="content4">
<p><img src="http://lorempixel.com/600/400/animals/"></p>
<p>Vivamus fringilla porttitor justo, ac varius neque tristique a. Duis iaculis augue a interdum pretium. Duis feugiat odio vel tortor tincidunt, in rhoncus lectus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer volutpat id orci et scelerisque. Nulla semper felis a risus egestas scelerisque. Ut tempus aliquam orci, pretium dapibus risus dictum at. Pellentesque consectetur eget est eu pulvinar. Nulla facilisi. Vivamus eu viverra turpis, et dapibus enim.</p>
</section>
答案 1 :(得分：0)
有很多错误。我已经优化了你的代码。您可以看到它： Demo
1）你的js很难看（也有错误）。您应该将id属性添加到<nav>或<ul>标记。然后，您可以在点击事件中通过此ID调用每个a。
$(document).ready(function () {
$('#menu li a').click(function () {
var href = $(this).attr("href");
$(href)
.show(200)
.siblings().hide('fast');
return false;
});
});
2）某些html代码放在<head>标记中。它应该在<body>中。
此外，您的部分应该通过块（div）包装。
<nav id="menu">
<ul>
<li id="cats"><a href="#content1">Cats</a>
</li>
<li id="food"><a href="#content2">Food</a>
</li>
<li id="fashion"><a href="#content3">Fashion</a>
</li>
<li id="animals"><a href="#content4">Animals</a>
</li>
</ul>
</nav>
<div class="contents">
<section id="content1">
...
</section>
<section id="content2">
...
</section>
<section id="content3">
...
</section>
<section id="content4">
...
</section>
</div>
答案 2 :(得分：0)
您可以在一个字符串中使用多个选择器（如CSS）来隐藏和显示。
$(document).ready(function(){
$('#cats').click(function(){
$('#content1').show(200);
$('#content2,#content3,#content4').hide('fast');
});
$('#food').click(function(){
$('#content2').show(200);
$('#content1,#content3,#content4').hide('fast');
});
$('#fashion').click(function(){
$('#content3').show(200);
$('#content1,#content2,#content4').hide('fast');
});
$('#animals').click(function(){
$('#content4').show(200);
$('#content1,#content2,#content3').hide('fast');
});
});*{
margin: 0 0;
padding:0 0;
}
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: sans-serif;
font-size: 14px;
}
nav {
width: 100%;
height: 40px;
position: fixed;
background-color: silver;
color: #FFFFFF;
text-align: center;
font-size: medium;
padding-top: 30px;
padding-bottom: 10px;
}
#content1 {
height: 500px;
text-align: center;
color: #000000;
padding-top: 80px;
}
#content2 {
height: 500px;
text-align: center;
color: #000000;
}
#content3 {
height: 500px;
text-align: center;
color: #000000;
}
#content4 {
height: 500px;
text-align: center;
color: #000000;
}
a {
color: #ffffff;
text-decoration: none;
}
a:visited {
color:black;
}
a:hover {
color: red;
}
img {
padding: 30px;
border-radius: 100%;
}
section{
width: 1000px;
padding-top: 30px;
margin-left: 150px;
}
ul li{
display:inline-block;
list-style:none;
}<html>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="myscript.js" type="text/javascript"></script>
<nav>
<ul>
<li id="cats"><a href="#content1">Cats</a></li>
<li id="food"><a href="#content2">Food</a></li>
<li id="fashion"><a href="#content3">Fashion</a></li>
<li id="animals"><a href="#content4">Animals</a></li>
</ul>
</nav>
<body>
<section id="content1">
<p><img src="http://lorempixel.com/600/400/cats/"></p>
<p>Vivamus fringilla porttitor justo, ac varius neque tristique a. Duis iaculis augue a interdum pretium. Duis feugiat odio vel tortor tincidunt, in rhoncus lectus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer volutpat id orci et scelerisque. Nulla semper felis a risus egestas scelerisque. Ut tempus aliquam orci, pretium dapibus risus dictum at. Pellentesque consectetur eget est eu pulvinar. Nulla facilisi. Vivamus eu viverra turpis, et dapibus enim.</p></section>
<section id="content2">
<img src="http://lorempixel.com/600/400/food/">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eleifend, libero vitae venenatis vulputate, tortor magna cursus arcu, id viverra est ante ut est. Nulla placerat purus in fermentum lobortis. Integer sit amet dapibus orci.</p>
</section>
<section id="content3">
<img src="http://lorempixel.com/600/400/fashion/">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eleifend, libero vitae venenatis vulputate, tortor magna cursus arcu, id viverra est ante ut est. Nulla placerat purus in fermentum lobortis. Integer sit amet dapibus orci.</p>
</section>
<section id="content4">
<p><img src="http://lorempixel.com/600/400/animals/"></p>
<p>Vivamus fringilla porttitor justo, ac varius neque tristique a. Duis iaculis augue a interdum pretium. Duis feugiat odio vel tortor tincidunt, in rhoncus lectus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer volutpat id orci et scelerisque. Nulla semper felis a risus egestas scelerisque. Ut tempus aliquam orci, pretium dapibus risus dictum at. Pellentesque consectetur eget est eu pulvinar. Nulla facilisi. Vivamus eu viverra turpis, et dapibus enim.</p>
</section>
</body>
</html>