时间戳

首页 > 解决方案 > 在显示 2 个 div 之间切换

javascript - 在显示 2 个 div 之间切换

问题描述

我正在尝试学习 jquery，我有 2 个 div 元素，我只想用一个按钮在隐藏和显示之间切换。我试图写下我想要的一切，但我认为 sintax 是错误的。

<div id="first"></div>
<div id="second">
</div>
<button class="change">change</button>

CSS：

  #first {
    width:500px;
    height:500px;
    margin:0 auto;
    background-color:#ccc;
  }
  #second {
    width:500px;
    height:500px;
    margin:0 auto;
    background-color:black;
    display:none;
  }

我写成 Jquery

$(document).ready(function() {
    $('.change').click(function() {
      $('#first').hide();
      $('#second').show();
    });
  });

我在考虑 if else 语句，但我不确定是否可以处理。

标签： javascriptjquery

解决方案

您可以使用 jQuery 的切换方法。使您的第二个 div 在初始化时隐藏...

$(document).ready(function() {
    $('.change').click(function() {
        $('#first, #second').toggle();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">first</div>
<div id="second" style="display: none;">second</div>
<button class="change">change</button>

工作示例：https ://jsfiddle.net/tanaydin/kjyq0eow/3/

文档：http ://api.jquery.com/toggle/

编辑后：@Darren Sweeney 的评论，这个选择器更好。

推荐阅读