DOM 带有内部链接的菜单 - 语法问题？

Question

我正努力为我的 DOM class（初学者）完成这个小项目。我认为我的语法不正确。基本上，我们要创建一个带有内部导航的单页站点。单击菜单项后，隐藏其他内容，仅显示单击的内容。很简单，但我似乎无法获得使用 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>

Answer 1

您应该在相同的引号内使用逗号分隔的选择器——您使用它的方式等同于向您的 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代码实际上过于冗余，可以通过使用上下文提示简单地减少：

在我改进的示例中，我为您的所有部分提供了一个通用 class。单击 <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>

Answer 2

错误较多。我优化了你的代码。可以看到：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> 中。此外，您的部分应该通过 block(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>

Answer 3

您可以在一个字符串中使用 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>

DOM 带有内部链接的菜单 - 语法问题？

DOM menu with internal links - issue with syntax?

javascript

syntax

jquery