原生js TAB切换

最新推荐文章于 2023-12-06 16:56:24 发布

一个造轮者

最新推荐文章于 2023-12-06 16:56:24 发布

阅读量317

点赞数 1

分类专栏： jq vue js

本文链接：https://blog.csdn.net/qq_35254907/article/details/77870577

版权

vue 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        img{
            border:0;
        }
        ol, ul ,li{list-style: none;}
        .div-1{
            width: 300px;
            height: 30px;
            background-color: red;
        }
        .div-2{
            width: 300px;
            height: 300px;
            background-color: pink;
            position: absolute;
            top:30px;
            left:0;
            display: none;
        }
        .div-11{
            width: 100px;
            height: 30px;
            background-color:yellow;
            float:left;
            cursor: pointer;
            text-align: center;
            line-height:30px;
        }
        .show{
            display:block;
        }
        .show-1{
            background-color: red;
        }
    </style>

</head>
<body>
    <div>
        <div class="div-1" id="div_1">
            <div class="div-11 show-1">dsada</div>
            <div class="div-11">dsadsa</div>
            <div class="div-11">dsadsa</div>
        </div>
        <div id="div_22">
          <div class="div-2 show">a</div>
          <div class="div-2">s</div>
          <div class="div-2">b</div>
        </div>

    </div>
</body>
</html>
 <script type="text/javascript">
         var div_1=document.getElementById('div_1');
         var div_1Child=div_1.children;
         var div_22=document.getElementById('div_22');
         var div_22Child=div_22.children;
         
         for(var i=0;i<div_1Child.length;i++){
                div_1Child[i].index=i;  
                div_1Child[i].οnclick=function(){
                  for(var j=0;j<div_1Child.length;j++){
                        div_1Child[j].className="div-11";
                      
                        div_22Child[j].className="div-2";
                         
                  }
                
                   div_1Child[this.index].className="div-11 show-1";
                   div_22Child[this.index].className="div-2 show";
                }
         }
    </script>