jquery - 如何使用按钮在两个 div 元素之间切换

Question

我知道如何切换 div，即隐藏/显示元素。但如何在两个 div 之间切换？

<button>Change</button>
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Answer 1

您可以使用jquery中的toggle()函数。隐藏任何一个 div 并首先显示其他 div，然后在单击按钮时调用 toggle()

$(function(){
  $('div.hindi').hide();// hide it initially
  $('button').on('click', function(){
     $('div.english, div.hindi').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change</button>
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>