tab切换，js和css实现的方法

坎坷的程序员

于 2020-11-17 17:02:48 发布

阅读量336

点赞数

分类专栏：前端文章标签： html5 css javascript

本文链接：https://blog.csdn.net/weixin_49527298/article/details/109746362

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

tab切换的布局

上面是你要显示的东西
下面的选择时的按钮

JavaScript部分
先获取元素
再循环遍历获得元素的下标（下标：就是有多少的东西）
设置按钮的点击事件
之后需要再重复一次上面的循环遍历（需要更改变量）
之后再设置显示和隐藏。

以下是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    
      <input type="button" value="1">
      <input type="button" value="2">
      <input type="button" value="3">
      <div style="display: block">1</div>
      <div>2</div>
      <div>3</div>
      <script type="text/javascript">
      var inputa=document.getElementsByTagName("input")//获取input
      var diva=document.getElementsByTagName("div")//获取div
      for(var i=0; i<inputa.length; i++){//循环遍历
        inputarr[i].onclick=function(){//点击事件
            for(var j=0; j<inputa.length;j++){//循环遍历
                inputa[j].style.background="#ffffff";//input的颜色
                this.style.background="blue";//this指定的颜色
                diva[j].style.display="none";//默认不显示
                if(this == inputa[j]){//判断this指定的div的下标是否和input的下标相同
                    divarr[j].style.display="block";//相同则显示
  
                }
               }
              }
             }
      </script>
</body>

</html>

除了用js可以实现外。css也可以实现哦

 /* 设置div内容的基础样式 隐藏内容div*/
            .ww+.qq+.one-q{
                display:none;
                position: absolute;
                left:0;
                top:60px;
            }
            /* input选中状态时候对应的label的样式 */
            .ww:checked+.qq{
                background: #333333;
                color:#fff;
            }
            /* input选中时候显示对应的div */
            .ww:checked+.qq+.one-q{
                display:block;
            }