javascript - 单击按钮后如何逐个调用部分并且上一节将隐藏？

Question

我有 3 个部分和一个按钮。

1. 当用户第一次点击按钮时，应该显示第一个section的内容。
2. 当用户第二次点击同一个按钮时，应显示第二部分并隐藏第一部分。
3. 第三部分也是如此。

请帮助我。

<section id="one" style="display:none;">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</section>

<section id="two" style="display:none;">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</section>

<section id="three" style="display:none;">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</section>

<input type="submit" onclick="checkDiv();">

<script>
    function checkDiv(){
        document.getElementById('one').style.display = "block";
    }
</script>

Answer 1

如果您将 jquery 包含到您的元素中，您可以这样做:

function next() {
  var current = $('.current');
  var next = current.next('.m-div:first');
  
  // loop back to the first div
  if(next.length == 0) { next = $('#one'); }
  
  current.removeClass('current');
  next.addClass('current');
}

.m-div {display: none;}

.m-div.current {
  display: block;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="m-div current" id="one" >
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</section>

<section class="m-div" id="two">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</section>


<section class="m-div" id="three">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</section>

<input type="submit" onclick="next();">