单击链接后，我尝试一次只显示一个 div。我正在使用的代码笔是 here如果有人可以看一下。我正在尝试使用 jQuery，这样当单击列表项中的元素时，它会切换该 div 项以仅显示，直到单击隐藏前一项的另一个项为止。
$( "#home_div" ).hide();
$( "#about_div" ).hide();
$( "#home" ).click(function() {
$('#home_div').toggle();
});
$( "#about" ).click(function() {
$('#about_div').toggle();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
</head>
<body>
<header class="header">
<ul class="main-nav">
<li id="home"><a href="#">Home</a></li>
<li><a id="about" href="#">About</a></li>
<li><a id ="portfolio" href="#">Portfolio</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
<div id="home_div"></div>
<div id="about_div"></div>
<div id="portfolio_div"></div>
<div id="contact_div"></div>
</header>
</body>最佳答案
为了使它以通用方式工作(并因此保持 JS 尽可能短)，您可以将目标内容的 id 放在 href 属性中a 元素。然后你可以简单地 toggle() 目标 div 同时隐藏它的 sibling ，像这样:
$('.main-nav a').click(function(e) {
e.preventDefault();
$($(this).attr('href')).toggle().siblings().hide();
});#content-container div {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul class="main-nav">
<li><a href="#home_div">Home</a></li>
<li><a href="#about_div">About</a></li>
<li><a href="#portfolio_div">Portfolio</a></li>
<li><a href="#contact_div">Contact</a></li>
</ul>
<div id="content-container">
<div id="home_div">Home</div>
<div id="about_div">About</div>
<div id="portfolio_div">Portfolio</div>
<div id="contact_div">Contact</div>
</div>关于javascript - 如何用最少的代码行一次显示一个 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51831270/