tab栏切换原理js

最新推荐文章于 2021-10-11 11:59:57 发布

qq_26892503

最新推荐文章于 2021-10-11 11:59:57 发布

阅读量1.1k

点赞数 1

文章标签： js前端web tab栏切换原理

本文链接：https://blog.csdn.net/qq_26892503/article/details/85255666

版权

tab栏切换原理js

- 直接上代码

直接上代码

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 350px;
            /*height: 200px;*/
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        .bot div{
            background-color: red;
            height: 300px;
            display: none;
        }
        .current{
            background-color: purple;
        }
        .bot div.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;
                alert(btns[i].index);
//                btns[i].onmousemove=function(){
//                    for(var j=0;j<btns.length;j++){
//                        btns[j].className="";
//                    }
//                    this.className="current";
//                    for(var i=0;i<divs.length;i++){
//                        divs[i].style.display="none";
//                    }
//                    divs[this.index].style.display="block";
//                }
//
//            }

            for(var i=0;i<btns.length;i++){
                btns[i].index=i;
                btns[i].onmousemove=function(){
                    for(var j=0;j<btns.length;j++){
                        btns[j].className="";
                        divs[j].className="";
                    }
                    this.className="current";
                    divs[this.index].className="show";
                }
            }
        }
    </script>
</head>
<body>
    <div class="box">
       <div class="top">
           <button>德意龙</button>
           <button>固定环</button>
           <button>天道</button>
           <button>加油</button>
           <button>气缸</button>
           <button>前端</button>
       </div>
        <div class="bot" id="divs">
            <div class="show">1号盒子</div>
            <div>2号盒子</div>
            <div>3号盒子</div>
            <div>4号盒子</div>
            <div>5号盒子</div>
            <div>6号盒子</div>
        </div>
    </div>
</body>
</html>