【无标题】js选项卡

最新推荐文章于 2022-07-26 11:19:18 发布

‭小木i

最新推荐文章于 2022-07-26 11:19:18 发布

阅读量56

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_61429045/article/details/121409640

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .tit span {
               float: left;
               width: 100px;
               background: #ccf;
           }

           .tit .select {
               background: #99f;
           }

           .con div {
               display: none;
               width: 300px;
               height: 200px;
               background: #cfc;
           }

           .con .show {
               display: block;
           }
       </style>
   </head>
   <body>
       <div class="tit" id="tabTit">
           <span class="select">1</span>
           <span>2</span>
           <span>3</span>
       </div>
       <div class="con" id="tabCon">
           <div class='show'>初始化TAB</div>
           <div>TAB切换2</div>
           <div>Tab切换3</div>
       </div>
       <script>

           class Tab{
               constructor(titId, titEle, conId, conEle){
                   this.titEle = document.getElementById(titId).getElementsByTagName(titEle)
                   this.conEle = document.getElementById(conId).getElementsByTagName(conEle)
                   var that = this
                   for(var i = 0;i<this.titEle.length;i++){
                       this.titEle[i].id = i
                       this.titEle[i].onclick = function(){
                           console.log(that);
                           console.log(this);
                           that.tabFun(this)
                       }
                   }
               }
           }
           Tab.prototype.tabFun = function(objTab){
               for(var i = 0;i<this.titEle.length;i++){
                   this.titEle[i].className = ''
                   this.conEle[i].className = ''
               }
               objTab.className = 'select'
               this.conEle[objTab.id].className = 'show'
           }
           new Tab('tabTit','span','tabCon','div')

       </script>
   </body>
</html>