选项卡的制作

最新推荐文章于 2024-05-06 21:05:10 发布

我是打工人

最新推荐文章于 2024-05-06 21:05:10 发布

阅读量274

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/szydqq/article/details/123332219

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul, ol, li {
      list-style: none;
    }

    .box {
      width: 600px;
      height: 400px;
      display: flex;
      flex-direction: column;
      border: 3px solid #333;
      margin: 50px auto;
    }

    .box > ul {
      height: 40px;
      display: flex;
    }

    .box > ul > li {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      background-color: skyblue;
      color: #fff;
      cursor: pointer;
    }

    .box > ul > li.active {
      background-color: orange;
    }

    .box > ol {
      flex: 1;
      position: relative;
    }

    .box > ol > li {
      width: 100%;
      height: 100%;
      background-color: purple;
      font-size: 100px;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .box > ol > li.active {
      display: block;
    }
  </style>

</head>
<body>

  <div class="box">
    <ul class="btnBox">
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ol class="tabBox">
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>

  <script>
    /*
      案例 - 选项卡

      分析逻辑:
        + 点击每一个 按钮 的时候, 仅让当前这个按钮高亮, 仅让当前按钮索引对应的 盒子 显示
        + 示例:
          => 你点击的是 [1] 的按钮
          => 除了 [1] 以外的按钮都没有高亮, 只有 [1] 的按钮有高亮
          => 除了 [1] 以外的盒子都没有显示, 只有 [1] 的盒子显示

      核心:
        + 点击每一个按钮的时候, 知道你点击的这个按钮的索引
    */

    // 复习选项卡
    // 1. 获取要操作的元素
    var btns = document.querySelectorAll('.btnBox > li')
    var tabs = document.querySelectorAll('.tabBox > li')

    // 2. 给 btns 内的每一个 li 添加点击事件
    btns.forEach(function (item, index) {
      item.onclick = function () {
        // 3-1. 给 btns 和 tabs 内的每一个元素取消 active 类名
        ;[ ...btns, ...tabs ].forEach(function (t) { t.className = '' })
        // 3-2. 给 btns 和 tabs 内的第 [index] 个添加 active
        btns[index].className = 'active'
        tabs[index].className = 'active'
      }
    })











    // 完成核心代码
    // var btns = document.querySelectorAll('.btnBox > li')
    // var tabs = document.querySelectorAll('.tabBox > li')

    // 给 btns 内的每一个 li 添加点击事件
    // btns.forEach(function (item, index) {
    //   item.onclick = function () {
    //     // index 表示当前点击的这个 按钮 的索引
    //     // 1. 搞按钮: 仅让当前按钮索引对应的高亮
    //     // 1-1. 让所有 按钮 都没有 active 类名
    //     for (var i = 0; i < btns.length; i++) {
    //       btns[i].classList.remove('active')
    //     }
    //     // 1-2. 给自己 添加 active 类名
    //     btns[index].classList.add('active')
    //     // 2. 搞盒子: 仅让当前按钮索引对应的盒子显示
    //     // 2-1. 让所有 盒子 都没有 active 类名
    //     for (var j = 0; j < tabs.length; j++) {
    //       tabs[j].classList.remove('active')
    //     }
    //     // 2-2. 给当前索引对应的盒子添加 active 类名
    //     tabs[index].classList.add('active')
    //   }
    // })


    // 优化一下
    // btns.length 一定会等于 tabs.length
    // btns.length === tabs.length 一定是 true
    // btns.forEach(function (item, index) {
    //   item.onclick = function () {
    //     // 1. 搞按钮: 仅让当前按钮索引对应的高亮
    //     // 1-1. 让所有 按钮 都没有 active 类名
    //     for (var i = 0; i < btns.length; i++) {
    //       btns[i].classList.remove('active')
    //       tabs[i].classList.remove('active')
    //     }
    //     // 1-2. 给自己 添加 active 类名
    //     btns[index].classList.add('active')
    //     // 2. 搞盒子: 仅让当前按钮索引对应的盒子显示
    //     // 2-2. 给当前索引对应的盒子添加 active 类名
    //     tabs[index].classList.add('active')
    //   }
    // })

    // btns.forEach(function (item, index) {
    //   item.onclick = function () {
    //     // 1. 搞按钮: 仅让当前按钮索引对应的高亮
    //     // 1-1. 让所有 按钮 都没有 active 类名
    //     for (var i = 0; i < btns.length; i++) {
    //       btns[i].className = tabs[i].className = ''
    //     }
    //     btns[index].className = tabs[index].className = 'active'
    //   }
    // })



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