原生JS制作简易Tabs组件

深碍√TFBOYSˉ_ 2022-02-25 01:30 209阅读 0赞

<!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>
        <script src="./TabsController.js"></script>
        <style> ul, li { list-style: none; margin: 0; padding: 0; } .tab .tab-bar { display: flex; border-bottom: 1px solid blue; } .tab .tab-bar li { margin: 3px 20px 0 0; width: 30px; text-align: center; } .tab .tab-bar li.active { border: 1px solid blue; border-bottom: none; } .tab .tab-content li { display: none; } .tab .tab-content li.active { display: block; } </style>
      </head>
      <body>
        <div class="tab">
          <ul class="tab-bar">
            <li>
              1
            </li>
            <li>
              2
            </li>
            <li>
              3
            </li>
          </ul>
          <ul class="tab-content">
            <li>content1</li>
            <li>content2</li>
            <li>content3</li>
          </ul>
        </div>
      </body>
      <script> new TabsController(document.querySelector(".tab")); </script>
    </html>

/** *自己封装的一个基础的Tabs组件 *使用时只需要在页面引入js然后将html中div.tab复制，使用new TabsController(element)即可 */
    class TabsController { 
      constructor(element) { 
        this.nav = element.querySelector(".tab-bar").children;
        this.content = element.querySelector(".tab-content").children;
        this.active = 1; //当前激活的标签
        this.init(); //初始化
        this.bindEvents(); //绑定事件
      }
      init() { 
        this.nav[0].classList.add("active");
        this.content[0].classList.add("active");
      }
      bindEvents() { 
        //封装foreach方法用来遍历节点
        const forEach = (context, fn) => Array.prototype.forEach.call(context, fn);
    
        //封装indexOf方法用来判断当前节点在父节点的中的次序
        const indexOf = (context, item) =>
          Array.prototype.indexOf.call(context, item);
    
        forEach(this.nav, i => { 
          i.addEventListener("click", e => { 
            forEach(this.nav, i => i.classList.remove("active"));
            forEach(this.content, i => i.classList.remove("active"));
            this.active = indexOf(this.nav, e.target);
            this.nav[this.active].classList.add("active");
            this.content[this.active].classList.add("active");
          });
        });
      }
    }