tab栏的简单切换

绝地灬酷狼 2023-07-08 09:22 43阅读 0赞

## tab栏的简单切换 ##

## 样式不是很好看，主要的是思路和逻辑 ##

## 上代码： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .active{ 
                background-color: skyblue;
            }
            div{ 
                display: none;
            }
        </style>
    </head>
    <body>
        <input type="button" value="tab1" class="active">
        <input type="button" value="tab2">
        <input type="button" value="tab3">
        <input type="button" value="tab4">
        <div style="display: block;">内容一</div>
        <div>内容二</div>
        <div>内容三</div>
        <div>内容四</div>
        <script>
            var tabs=document.querySelectorAll("input");  //获取到所有的数组 
            var divs=document.querySelectorAll("div");  //获取到所有的数组 
            for(var i=0;i<tabs.length;i++){              //遍历 ，把每个tab栏遍历出来
                tabs[i].index=i;                        //把i赋值给每个tab栏的下标
                tabs[i].onclick=function(){                 //给每个tab栏绑定点击事件
                    for(var i=0;i<tabs.length;i++){          
                        tabs[i].className=""                    //把所有的tab类名清空
                    };
                    for(var i=0;i<divs.length;i++){         
                        divs[i].style="display:none"            //把所有的div都给隐藏起来
                    }
                    divs[this.index].style="display:block";     //点谁就让它显示出来
                    tabs[this.index].className="active"         //点谁就让它有这个类名，对应css就有样式了
                }           
            }
        </script>
    </body>
    </html>