1
我試圖讓我的DOM類（初學者）完成這個小項目。我認爲我的語法是關閉的。基本上，我們要創建一個帶有內部導航的1頁網站。在點擊菜單項時，其他內容被隱藏，並且僅顯示被點擊的內容。很簡單，但我似乎無法讓我的語法與ID一起工作。帶有內部鏈接的DOM菜單 - 問題與語法？
這是我的。謝謝！
$(document).ready(function(){
\t $('#cats').click(function(){
\t \t $('#content1').show(200);
\t \t $('#content2','#content3','#content4').hide('fast'); \t
\t
\t });
\t $('#food').click(function(){
\t \t $('#content2').show(200);
\t \t $('#content1','#content3','#content4').hide('fast'); \t
\t
\t });
\t $('#fashion').click(function(){
\t \t $('#content3').show(200);
\t \t $('#content1','#content2','#content4').hide('fast'); \t
\t
\t });
\t $('#animals').click(function(){
\t \t $('#content4').show(200);
\t \t $('#content1','#content2','#content3').hide('fast'); \t
\t
\t });
});*{
margin: 0 0;
padding:0 0;
}
body {
\t margin-top: 0px;
\t margin-bottom: 0px;
\t margin-left: 0px;
\t margin-right: 0px;
\t font-family: sans-serif;
\t font-size: 14px;
}
nav {
\t width: 100%;
\t height: 40px;
\t position: fixed;
\t background-color: silver;
\t color: #FFFFFF;
\t text-align: center;
\t font-size: medium;
\t padding-top: 30px;
\t padding-bottom: 10px;
}
#content1 {
\t height: 500px;
\t text-align: center;
\t color: #000000;
\t padding-top: 80px;
}
#content2 {
\t height: 500px;
\t text-align: center;
\t color: #000000;
}
#content3 {
\t height: 500px;
\t text-align: center;
\t color: #000000;
\t }
#content4 {
\t height: 500px;
\t text-align: center;
\t color: #000000;
}
a {
\t color: #ffffff;
\t text-decoration: none;
}
a:visited {
\t color:black;
}
a:hover {
\t color: red;
}
img {
\t padding: 30px;
\t border-radius: 100%;
}
section{
\t width: 1000px;
\t padding-top: 30px;
\t margin-left: 150px;
}
ul li{
\t display:inline-block;
\t list-style:none;
}<html>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="myscript.js" type="text/javascript"></script>
<nav>
\t <ul>
\t \t <li id="cats"><a href="#content1">Cats</a></li>
\t \t <li id="food"><a href="#content2">Food</a></li>
\t \t <li id="fashion"><a href="#content3">Fashion</a></li>
\t \t <li id="animals"><a href="#content4">Animals</a></li>
\t </ul>
</nav>
<body>
<section id="content1">
\t <p><img src="http://lorempixel.com/600/400/cats/"></p>
\t <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">
\t <img src="http://lorempixel.com/600/400/food/">
\t <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">
\t <img src="http://lorempixel.com/600/400/fashion/">
\t <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">
\t <p><img src="http://lorempixel.com/600/400/animals/"></p>
\t <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>
你應該使用這樣的：'$（ '＃內容2，＃content3，＃content4'）隱藏（ '快'）;' – Terry
@Vireonidae。在演示中查看我的答案。我希望它能幫助你。 –