Question

我们要说divs。

<div class="first">
  <p>hello</p>
</div>

<div class="second">
  <p>goodnight</p>
</div>

我想要做的是让button将它用作这两个div之间的切换器。

当文档加载时，我只想看到第一个div，按下按钮后只能看到第二个div，然后继续。

提前致谢。

Answer 1

您可以将jQuery toggle()用于此

＆＃13;

$(function() {
  $('.second').hide();
  $('button').click(function() {
    $('.first,.second').toggle();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="first">
  <p>hello</p>
</div>

<div class="second">
  <p>goodnight</p>
</div>

<button>switch</button>

＆＃13;

Answer 2

您可以使用toggleClass()切换hidden类：

＆＃13;

$('#btn').on('click', function() {
  $('.block').toggleClass('hidden');
});

＆＃13;

.hidden { display:none }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block first">
  <p>hello</p>
</div>

<div class="block second hidden">
  <p>goodnight</p>
</div>

<button id="btn">Toggle</button>

＆＃13;

在Jquery中切换2个div之间的视图？

2 个答案: