选项卡? - 掘金

<!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;
    }

    .tab-container {
      width: 306px;
      margin: 20px auto 0;
    }

    .tab-container .tab-header {
      list-style: none;
    }

    .tab-container .tab-header li {
      float: left;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid pink;
      cursor: pointer;
    }

    .tab-container .tab-header li.select {
      background-color: orange;
      color: #ffffff;
    }

    .tab-container .tab-panel div {
      display: none;
      width: 304px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      border: 1px solid pink;
      border-top: none;
    }

    .tab-container .tab-panel div.select {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab-container">
    <!-- 页卡部分  -->
    <ul class="tab-header" id="tab-header">
      <li class="select">电影</li>
      <li>电视剧</li>
      <li>综艺</li>
      <!-- <li>综艺</li>
      <li>综艺</li> -->
    </ul>

    <!-- 面板内容 -->
    <div class="tab-panel" id="tab-panel">
      <div class="select">无双</div>
      <div>知否</div>
      <div>吐槽大会</div>
    </div>
  </div>
  <script>
    // 获取页卡父级元素
    var tabHeader = document.getElementById('tab-header')
    // 通过父级获取到里面li元素（页卡）[li, li, li]
    var tabHeaderList = tabHeader.getElementsByTagName('li')
    
    // 获取面板父级元素
    var tabPanel = document.getElementById('tab-panel')
    // 通过面板父级获取里面div元素（面板）[div, div, div]
    var tabPanelList = tabPanel.getElementsByTagName('div')

    // 根据点击的li 得到的索引n  再去面板集合中找到对应索引位置n的 div 添加类名即可
    // [li, li, li]  0 1 2
    // [div, div, div] 0 1 2 


    // 循环3次 每次都会给当前取出来的li 绑定点击事件
    for (var i = 0; i < tabHeaderList.length; i++) {
      // console.log('循环时', i, tabHeaderList[i])
      
      // 将当前i的值作为索引 存储个当前的li元素对象
      // 给元素对象添加自定义属性
      tabHeaderList[i]._index = i

      // tabHeaderList[0]._index = 0
      // tabHeaderList[1]._index = 1
      // tabHeaderList[2]._index = 2
      

      // 给每个li循环绑定事件（click事件）
      tabHeaderList[i].onclick = function () {
        // 拿到当前点击li身上的索引
         var ind = this._index

        // 先把其他li类名 去掉
        for (var l = 0; l < tabHeaderList.length; l++) {
          tabHeaderList[l].className = ''
          tabPanelList[l].className = ''
        }

        // this 代表的 当前绑定事件的元素对象
        this.className = 'select'
        tabPanelList[ind].className = 'select'
      }
      
    }

    
    // 第一次循环
    // li[0].onclick = function() {
    //    console.log(this) // 第一个li这个元素
    // }

    // // 第二次循环
    // li[1].onclick = function () {
    //   console.log(this) // 第二个li这个元素
    // }

    // // 第三次循环
    // li[2].onclick = function () {
    //   console.log(this) // 第三个li这个元素
    // }

    // li有没有被点击的问题

    // console.dir(tabHeaderList[0])

    // onclick 元素点击事件 （事件处理函数）
    
    // // onclick用来监听当前元素有没有被点击
    // tabHeaderList[0].onclick = function () {
    //   // 当鼠标点击这个元素的时候 就会触发这个函数
    //   // console.log('点点点 00000')
    //   console.log(this) // 第一个li元素对象
    // }

    // tabHeaderList[1].onclick = function () {
    //   // 当鼠标点击这个元素的时候 就会触发这个函数
    //   console.log('点点点 11111')
    //   // console.log(this === tabHeaderList[1])
    // }

    // tabHeaderList[2].onclick = function () {
    //   // 当鼠标点击这个元素的时候 就会触发这个函数
    //   console.log('点点点 22222')
    // }
  </script>
</body>
</html>