Question

点击链接后，我一次只能显示一个div。我正在研究的Codepen是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>

Answer 1

要以通用方式进行此工作（从而使JS尽可能短），可以将目标内容的id放在href的{{1}}属性内元素。然后，您只需a目标div即可隐藏其兄弟姐妹，如下所示：

toggle()

$('.main-nav a').click(function(e) {
  e.preventDefault();
  $($(this).attr('href')).toggle().siblings().hide();
});

#content-container div {
  display: none;
}

Answer 2

为所有内容提供一个通用类。然后使用导航链接的ID为要显示的内容创建选择器

$('.main-nav a').click(function(e) {
   e.preventDefault();
  // hide all content class and filter the matching id to show
  $('.content').hide().filter('#' + this.id + '_div').show();
});

.content {
  display: none
}

.content:first-of-type {
  display: block
}

<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><a id="home" 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 class="content" id="home_div">home_div</div>
    <div class="content" id="about_div">about_div</div>
    <div class="content" id="portfolio_div"></div>
    <div class="content" id="contact_div">portfolio_div</div>
  </header>
</body>

Answer 3

零JavaScript怎么样？您可以将菜单更改为与控制显示div的单选按钮绑定的标签。 CSS仅在当前选中的单选按钮之后立即显示div，可通过单击任何菜单标签进行修改。

[name=mainNavState] { display: none; }
[name=mainNavState] + div { display: none; }
[name=mainNavState]:checked + div { display: inherit; }

<ul class="main-nav">
  <li id="home"><label for="homeState">Home</label></li>
  <li><label for="aboutState">About</label></li>
  <li><label for="portfolioState">Portfolio</label></li>
  <li><label for="contactState">Contact</label></li>
</ul>

<input type="radio" name="mainNavState" id="homeState" checked>
<div id="home_div"> My Home Stuff </div>
<input type="radio" name="mainNavState" id="aboutState">
<div id="about_div"> My About Stuff </div>
<input type="radio" name="mainNavState" id="portfolioState">
<div id="portfolio_div"> My Portfolio Stuff </div>
<input type="radio" name="mainNavState" id="contactState">
<div id="contact_div"> My Contact Stuff </div>

如何用最少的代码一次显示一个div？

3 个答案: