js tab选项卡切换

最新推荐文章于 2024-03-06 11:29:06 发布

慢慢走的小可爱

最新推荐文章于 2024-03-06 11:29:06 发布

阅读量77

点赞数

本文链接：https://blog.csdn.net/zxjsm/article/details/103554671

版权

<div class="wraper">
      <button class="active_btn">选项卡01</button>
      <button>选项卡02</button>
      <button>选项卡03</button>
      <button>选项卡04</button>
      <div class="clear"></div>
      <div class="content">
        <div class="box active">我是内容01</div>
        <div class="box">我是内容02</div>
        <div class="box">我是内容03</div>
        <div class="box">我是内容04</div>
      </div>
    </div>

button {
      outline: none;
      appearance: none;
      border: none;
      width: 130px;
      height: 20px;
      float: left;
    }
    .clear {
      clear: both;
    }
    .content {
      width: 520px;
      height: 200px;
      background-color: yellow;
    }

    .box {
      height: 200px;
      text-align: center;
      display: none;
    }
    .active {
      display: block;
    }
    .active_btn {
      background-color: pink;
      color: blue;
    }

// 需求分析：当用户点击选项卡时，对应显示box中内容

      // 1.获取所有被操作的元素
      var btns = document.getElementsByTagName("button");
      var boxs = document.getElementsByClassName("box");
      // 2.给每一个button按钮绑定点击事件
      // for(var i=0;i<btns.length;i++){
      //     btns[i].i = i;
      //     btns[i].onclick = function(){
      //         // 清空所有的button按钮样式
      //         for(var j=0;j<btns.length;j++){
      //             btns[j].className = '';
      //             // 让所有的box为隐藏状态
      //             // console.log(boxs[j])
      //             boxs[j].className = 'box';
      //         }
      //         this.className = 'active_btn';
      //         boxs[this.i].className = 'box active';
      //     }
      // }

        // 第二种方式
      for (var i = 0; i < btns.length; i++) {
        (function(i) {
          var i = i;
          btns[i].onclick = function() {
            // 清空所有的button按钮样式
            for (var j = 0; j < btns.length; j++) {
              btns[j].className = "";
              // 让所有的box为隐藏状态
              // console.log(boxs[j])
              boxs[j].className = "box";
            }
            btns[i].className = "active_btn";
            boxs[i].className = "box active";
          };
        })(i);
      }
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20191215222435556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4anNt,size_16,color_FFFFFF,t_70)