tab栏的简单切换

最新推荐文章于 2024-07-18 16:22:57 发布

chenronglong20

最新推荐文章于 2024-07-18 16:22:57 发布

阅读量208

点赞数

文章标签： js html css javascript

本文链接：https://blog.csdn.net/chenronglong20/article/details/104508860

版权

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>

chenronglong20

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab栏的简单切换

tab栏的简单切换样式不是很好看，主要的是思路和逻辑上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
复制链接

扫一扫