首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何用最少的代码行一次显示一个div?

如何用最少的代码行一次显示一个div?
EN

Stack Overflow用户
提问于 2018-08-14 06:12:39
回答 3查看 39关注 0票数 0

我试图一次只显示一个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>

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-08-14 06:20:05

要以通用的方式执行此操作(从而使JS尽可能简短),可以将目标内容的id放在a元素的href属性中。然后,您可以简单地toggle()目标div,同时隐藏其同级目录,如下所示:

$('.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>

票数 3
EN

Stack Overflow用户

发布于 2018-08-14 06:19:13

给所有的内容一个公共的类。然后使用导航链接的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>

票数 0
EN

Stack Overflow用户

发布于 2018-08-14 06:36:54

零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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51831270

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档