一个按钮对多个div进行显隐切换

最新推荐文章于 2023-08-19 07:17:36 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2023-08-19 07:17:36 发布

阅读量1.3k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Guoyu1_/article/details/86158067

版权

js 专栏收录该内容

83 篇文章 1 订阅

订阅专栏

<html>
<head>
    <meta charset="UTF-8">
    <title>隐藏和显示</title>
    <script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id='d1' style='display:block;width:30px;height:20px;background-color:red'></div>
<div id='d2' style='display:none;width:30px;height:20px;background-color:blue'></div>
<div id='d3' style='display:none;width:30px;height:20px;background-color:yellow'></div>
<input type=button value="Toggle" onclick='toggleDiv()'>
<script>
    // 全局变量
    var divs=[];
    var divCnt = 3; //div 数量
    for (var i=0;i<divCnt;i++) {
        divs[i] = document.getElementById("d"+(i+1));
    }
    var selectedDiv = 0;
    function toggleDiv(){
        selectedDiv++;
        selectedDiv = selectedDiv % divCnt; //
        for (var i=0;i< divCnt;i++) {
            divs[i].style.display="none";
        }
        divs[selectedDiv].style.display="block";
    }
</script>
</body>
</html>