需求一个js ，原有5个隐藏的div，一个按钮，点击一次按钮显示一个div，再点一次就再显示一个

发布网友发布时间：2022-10-16 21:40

共2个回答

热心网友时间：2023-10-24 07:52

<body>
    <input type="button" id="btn" value="click" />
    <div id="div1" style="width:50px; height:50px; background:red; display:none"></div>
    <div id="div2" style="width:50px; height:50px; background:yellow; display:none"></div>
    <div id="div3" style="width:50px; height:50px; background:#000; display:none"></div>
    <div id="div4" style="width:50px; height:50px; background:#0F6; display:none"></div>
    <div id="div5" style="width:50px; height:50px; background:#CF6; display:none"></div>
</body>
<script>
   var oBtn = document.getElementById('btn');
var aDiv = document.getElementsByTagName('div');
var index = 0;
oBtn.onclick = function(ev){
if(aDiv[index%5].style.display == 'block'){
aDiv[index%5].style.display = 'none';
} else {
aDiv[index%5].style.display = 'block';
}
index++;
};

</script>

追问不是我要的是当点击第5次，也就是最后一次的时候最后一个div显示同时那个按钮消失

追答<body>
    <input type="button" id="btn" value="click" />
    <div id="div1" style="width:50px; height:50px; background:red; display:none"></div>
    <div id="div2" style="width:50px; height:50px; background:yellow; display:none"></div>
    <div id="div3" style="width:50px; height:50px; background:#000; display:none"></div>
    <div id="div4" style="width:50px; height:50px; background:#0F6; display:none"></div>
    <div id="div5" style="width:50px; height:50px; background:#CF6; display:none"></div>
</body>
<script>
     var oBtn = document.getElementById('btn');
    var aDiv = document.getElementsByTagName('div');
    var index = 0;
    oBtn.onclick = function(ev){
        if(aDiv[index%5].style.display == 'none'){
            aDiv[index%5].style.display = 'block';
        }
        if(index%5==0){
            oBtn.style.display = 'none';
        }
        index++;
    };

</script>

热心网友时间：2023-10-24 07:53

var divs=$("div").children();
var clkCount=0;
var add=true;

$('#btn').click(function(){
if (add)

divs[clkCount++].show();
else
divs[clkCount--].show();

if (clkCount=5)
add=false;
});