Question

我有3个sections和一个button。

当用户第一次点击button时，应显示第一个section的内容。
当用户第二次点击同一按钮时，应显示第二部分，并隐藏第一部分。
第三节第三节。

请帮助我。

<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的手风琴

https://jqueryui.com/accordion/

Answer 2

如果你将jquery包含在你的项目中，你可以这样做：

＆＃13;

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');
}

＆＃13;

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

＆＃13;

<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();">

＆＃13;

Answer 3

这是一个非常干净的方法来使用纯JS：

＆＃13;

//Wrap your function in a self-invocing funtion to have private variables outside the function that gets executed on each click. This prevents from the elem value being reset everytime the function is called.
var checkDiv=(function(){
    //Create a couple private variables:
    var sections = ['one','two','three'],
        elem = -1;
    //The returned function will be executed when checkDiv is called:
    return function(e){
        //check if there's more content to show:
        if(elem<sections.length){
            //first hide the current element (unless there's nothing yet to hide):
            if(elem>-1) document.getElementById(sections[elem]).style.display = "none";
            //then switch to the next element:
            elem++;
            //and display the new element:
            document.getElementById(sections[elem]).style.display = "block";
            //as a bonus, you can disable the button once there's no more content to show:
            if(elem===sections.length-1) e.currentTarget.disabled=true;
        }
    }
})();

＆＃13;

<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="button" onclick="checkDiv(event)" value="next">

＆＃13;

单击按钮后如何逐个调用部分，上一部分将隐藏？

3 个答案: