js实现tab切换

最新推荐文章于 2023-11-17 10:07:22 发布

HongArcher

最新推荐文章于 2023-11-17 10:07:22 发布

阅读量316

点赞数 1

本文链接：https://blog.csdn.net/HongArcher/article/details/77687298

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .btn{
               border: 1px solid black;
               background-color: cyan;
               display: inline-block;
               width: 45px;
               text-align: center;
           }
           .show{
               width: 200px;
               height: 200px;
               background: yellow;
               color: red;
               font-size: 30px;
               text-align: center;
           }
           .s1{
               background: brown;
               display: none;
           }
           .s2{
               background: blueviolet;
               display: none;
           }
           .s3{
               background:blue;
               display: none;
           }
       </style>
   </head>
   <body>
       <div>
           <span class="btn">1</span>
            <span class="btn">2</span>
            <span class="btn">3</span>
            <span class="btn">4</span>
       </div>
       <div class="show">1</div>
       <div class="show s1">2</div>
       <div class="show s2">3</div>
       <div class="show s3">4</div>

   </body>
   <script type="text/javascript">
           var btn = document.getElementsByClassName('btn');
            var show = document.getElementsByClassName('show');

            for(var i=0;i<btn.length;i++){

               (function(a){
                   btn[i].onclick = function(){
                   //让所有btn背景颜色初始化
                   for(var j=0;j<btn.length;j++){
                       btn[j].style.backgroundColor='cyan';
                       show[j].style.display='none';
                   }
                   //this指向的是触发事件的元素
                   this.style.backgroundColor='gray';
                   show[a].style.display='block';
                    }
                })(i)
            }




            //很麻烦的方法
//             btn[0].onclick = function(){
//                show[0].style.display='block';
//                show[1].style.display='none';
//                show[2].style.display='none';
//                show[3].style.display='none';
//                btn[0].style.backgroundColor='red';
//             }
//             btn[1].onclick = function(){
//                show[1].style.display='block';
//                show[0].style.display='none';
//                show[2].style.display='none';
//                show[3].style.display='none';
//                btn[1].style.backgroundColor='black';
//
//             }
//             btn[2].onclick = function(){
//                show[2].style.display='block';
//                show[1].style.display='none';
//                show[0].style.display='none';
//                show[3].style.display='none';
//                btn[2].style.backgroundColor='blue';
//             }
//             btn[3].onclick = function(){
//                show[3].style.display='block';
//                show[1].style.display='none';
//                show[2].style.display='none';
//                show[0].style.display='none';
//                btn[3].style.backgroundColor='gray';
//             }


   </script>
</html>