Tab栏切换(一)

最新推荐文章于 2022-11-22 22:11:51 发布

pretty_young_thing

最新推荐文章于 2022-11-22 22:11:51 发布

阅读量990

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/pretty_young_thing/article/details/52741068

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Tab栏切换效果：

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 400px;
            margin:100px auto;
            border:1px solid #ccc;
        }
        .bottom div{
            width:100%;
            height: 300px;
            background-color: pink;
            display: none;
        }
        .purple {
            background-color: purple;
        }
        .bottom .show {
            display: block;
        }

    </style>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button");
            var divs = document.getElementById("divs").getElementsByTagName("div");
            for(var i= 0;i<btns.length;i++)
            {
                btns[i].index = i;  // 因为上面的盒子与下面的盒子有关系，点击上面的盒子就显示下面的盒子
                btns[i].onclick = function(){
                    //让所有的 btn 类名清空
                    //alert(this.index);
                    for(var j=0;j<btns.length;j++)
                    {
                        btns[j].className = "";
                        divs[j].className = "";
                    }
                    // 当前的那个按钮 的添加 类名
                    this.className = "purple";
                    //先隐藏下面所有的 div盒子
                    //留下中意的那个 跟点击的序号有关系的
                    divs[this.index].className = "show";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="top">
        <button>第一个</button>
        <button>第二个</button>
        <button>第三个</button>
        <button>第四个</button>
        <button>第五个</button>
    </div>
    <div class="bottom" id="divs">
        <div class="show">第一个盒子</div>
        <div>第二个盒子</div>
        <div>第三个盒子</div>
        <div>第四个盒子</div>
        <div>第五个盒子</div>
    </div>
</div>

</body>
</html>