简单构造封装tab栏

半颗黄豆
224 阅读1分钟

image.png

<!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>
  <link rel="stylesheet" href="./css/tab.css" />
</head>

<body>
  <div class="box" id="box">
    <div class="hd">
      <span class="current">体育</span>
      <span>娱乐</span>
      <span>新闻</span>
      <span>综合</span>
    </div>
    <div class="bd">
      <ul id="list">
        <li class="current">我是体育模块</li>
        <li>我的娱乐模块</li>
        <li id="li3">我是新闻模块</li>
        <li>我是综合模块</li>
      </ul>
    </div>
  </div>

  <script>
    // function MyTab(selector){}
    // MyTab.prototype.tabCLick = function(){}

    class MyTab {
      // 添加构造器
      // 构建对象的成员
      constructor(selector) {
        this.box = document.querySelector(selector)
        // 获取元素
        this.spans = this.box.querySelectorAll('.hd span')
        this.lis = this.box.querySelectorAll('.bd li')

        this.tabClick()
      }

      // 单击选项，进行操作
      tabClick() {
        // 将正确的this存储到变量中，供下面的嵌套函数使用
        let _this = this

        this.spans.forEach(function (ele, index) {
          ele.addEventListener('click', function () {
            // 标签项排他法：干掉当前有current样式的span元素的current样式，为当前被单击的span添加curretn样式
            _this.box.querySelector('.hd .current').classList.remove('current')
            ele.classList.add('current')

            // 内容面板的排他法
            _this.box.querySelector('.bd .current').classList.remove('current')
            _this.lis[index].classList.add('current')
          })
        })
      }
    }
    new MyTab('#box')

  </script>
</body>

</html>
avatar
文章
阅读
粉丝