tab栏切换

前端小妹

已于 2022-09-18 17:54:28 修改

阅读量125

点赞数 1

分类专栏： js 文章标签： servlet javascript 前端

于 2022-09-18 17:51:19 首次发布

本文链接：https://blog.csdn.net/qq_51545524/article/details/126920638

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

排他思想

设置自定义属性，让两组内容相互关联

页面：

代码：

<!DOCTYPE html>

<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .wrapper {
      width: 600px;
      margin: 100px auto;
      
    }
    .wrapper .tab{
      height: 36px;
      width:600px;
    }
    .wrapper li{
      width: 100px;
      float: left;
      padding-right: 5px;
      list-style: none;
      text-align: center;
    }
    .mian{
      display: none;
    }
    .product .active{
      display: block;
    }
   .active1{
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="tab">
        <ul>
          <li class="tab-item active1">111</li>
          <li class="tab-item">222</li>
          <li class="tab-item">333</li>
          <li class="tab-item">444</li>
        </ul>
    </div>
    <div class="product">
        <div class="mian active">
          1111111111111111111111111111 11
          草稿已保存 15:19:33 共 888 字
        </div>
        <div class="mian">
          22222222222222222222222222222
          草稿已保存 15:19:33 共 888 字
        </div>
        <div class="mian">
          3333333333333333333333333333311
          草稿已保存 15:19:33 共 888 字
        </div>
        <div class="mian">
          444444444444444444444
          草稿已保存 15:19:33 共 888 字
        </div>
    </div>
  </div>
  <script>
      var tabItems = document.querySelector('.tab').querySelectorAll('.tab-item')
      var mains = document.querySelector('.product').querySelectorAll('.mian')
      for (let index = 0; index < tabItems.length; index++) {
          tabItems[index].onclick = function () {
              this.setAttribute('num',index)
              for (let index = 0; index < tabItems.length; index++) {
                tabItems[index].className = "tab-item"

              }
              var num = this.getAttribute('num');
              this.className = "tab-item active1"
              for (let index = 0; index < mains.length; index++) {
                mains[index].style.display = 'none'            
              }
              mains[num].style.display = 'block'
          }
      }
  </script>
</body>

</html>