Question

js反复点击button依次显示隐藏的控件怎么实现?

假设我有一个button 和 三个div. 初始默认这三个div都是display:none;
我想实现，当我第一次点击button 第一个div 改变成 display:block; 然后再点击一次. 第二个div 改变成 display:block; 点击第三次, 第三个div 改变成 display:block;

用js怎么实现?

Answer 1

   
<button id="btn1" onclick="btn1()">报名</button>
<div id="div1" style="background:#999999; display:none;">
<button id="btn2" onclick="btn2()">第一个div</button>
</div>
<div id="div2" style="background:#666; display:none;">
<button id="btn3" onclick="btn3()">第二个div</button>
</div>

   

function btn1(){
    document.getElementById('div1').style.display='block'; 
}
function btn2(){
    document.getElementById('div1').style.display='none';
    document.getElementById('div2').style.display='block';
}

function btn3(){

    document.getElementById('div2').style.display='none';  

}

   

追问

这个是三个button吧？

我只有一个button, 第一次点击 第一个 div 改变 display的值为 block, 依次点击下去显示第二个div 和第三个.