实现简易选项卡

最新推荐文章于 2020-12-05 19:26:26 发布

板扎的青春

最新推荐文章于 2020-12-05 19:26:26 发布

阅读量116

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/GuoRongABC/article/details/107195081

版权

 <div class="container">
        <!-- 选项卡结构 -->
        <div class="control">
            <button>按钮1</button>
            <button>按钮2</button>
            <button>按钮3</button>
        </div>
        <div class="content">
            <div class="box">内容1</div>
            <div class="box">内容2</div>
            <div class="box">内容3</div>
        </div>
    </div>

 <script> 
  var box1=document.querySelectorAll(".control button");
var box2=document.querySelectorAll(".box");
for(var i=0;i<box1.length;i++){
    box1[i].index=i;
    box1[i].onclick=function(){
        var index=this.index;
        // 获取到按钮的下标
            for(var i = 0 ; i < box2.length ; i++){
                          box2[i].style.display = "none"; 
                        //   隐藏所有元素      //   
                    }
                    box2[index].style.display = "block"; 
                    // 显示当前的点击元素    //  
        }
    }
  </script>