JS实现Tab栏切换

最新推荐文章于 2023-02-13 12:15:01 发布

qq_26892503

最新推荐文章于 2023-02-13 12:15:01 发布

阅读量271

点赞数 2

文章标签：原生JS实现TAB栏切换 tab栏切换原理_javascript技巧 tab标签 tab选项卡多页签代码选项卡代码

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

版权

在这里插入图片描述

原理

“干掉所有人，留下我自己”

上代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 360px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 5px;
        }
        .btn{
             /*添加父标签除button间距*/
            font-size: 0;
        }
        .btn .current{
            background-color: cornflowerblue;
        }
        button{
            width: 90px;
            height: 25px;
        }
        .con{
            height: 175px;
            background-color: lightpink;
            text-align: center;
            line-height: 175px;
            font-size: 30px;
            display: none;
        }
        #content .co{
            display: block;
        }

    </style>
    <script>
        window.function(){
            var box=document.getElementById("box");
            var btn=document.getElementById("btn");
            var btns=document.getElementsByTagName("button");
            var content=document.getElementById("content");
            var divs=content.getElementsByTagName("div");
            for(var i=0;i<btns.length;i++){
               btns[i].index=i;//给每个按钮添加一个自定义属性，用来存储当前的索引
               btns[i].onmouseover=function(){
                   for(var j=0;j<btns.length;j++){
                       btns[j].className="";
                       divs[j].style.display="none";
                   }
                   this.className="current";
                   divs[this.index].style.display ="block";
               }
            }

        }
    </script>
</head>
<body>
    <div class="box" id="box">
        <div class="btn" id="btn">
            <button class="current">按钮01</button>
            <button>按钮02</button>
            <button>按钮03</button>
            <button>按钮04</button>
        </div>
        <div id="content">
            <div class="con co">内容1</div>
            <div class="con">内容2</div>
            <div class="con">内容3</div>
            <div class="con">内容4</div>
        </div>
    </div>
</body>
</html>