Web组件速成教程：实现选项卡面板

2023-10-10 17:13:47

随着网络技术的飞速发展，Web组件作为一种封装可重用代码的新方法，正受到越来越广泛的关注。Web组件将HTML、CSS和JavaScript组合在一起，形成一个可独立于浏览器平台运行的模块。这篇文章将通过一个简单的示例——实现选项卡面板——带你领略Web组件的魅力。

理解Web组件

Web组件的本质在于封装性：它将相关代码封装成一个独立的模块，对外提供一个清晰的接口。这意味着组件可以轻松地在不同的应用程序和环境中复用，大大提高了开发效率。

构建选项卡面板

现在，让我们通过构建一个选项卡面板来实战体验Web组件。选项卡面板包含多个选项卡，点击不同选项卡可切换显示不同内容。

HTML结构

<div id="tabs">
  <ul class="nav">
    <li><a href="#tab1">选项卡 1</a></li>
    <li><a href="#tab2">选项卡 2</a></li>
    <li><a href="#tab3">选项卡 3</a></li>
  </ul>

  <div class="content">
    <div id="tab1">选项卡 1 的内容</div>
    <div id="tab2">选项卡 2 的内容</div>
    <div id="tab3">选项卡 3 的内容</div>
  </div>
</div>

JavaScript代码

class Tabs extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
      <style>
        /* 样式代码 */
      </style>

      <ul class="nav">
        <li><a href="#tab1">选项卡 1</a></li>
        <li><a href="#tab2">选项卡 2</a></li>
        <li><a href="#tab3">选项卡 3</a></li>
      </ul>

      <div class="content">
        <div id="tab1">选项卡 1 的内容</div>
        <div id="tab2">选项卡 2 的内容</div>
        <div id="tab3">选项卡 3 的内容</div>
      </div>
    `;

    this.nav = this.shadowRoot.querySelector("ul.nav");
    this.content = this.shadowRoot.querySelector("div.content");

    this.nav.addEventListener("click", (e) => {
      e.preventDefault();

      const tabId = e.target.getAttribute("href");
      this.showTab(tabId);
    });
  }

  showTab(tabId) {
    const tabContent = this.content.querySelector(tabId);
    const tabs = this.nav.querySelectorAll("a");

    tabs.forEach((tab) => {
      tab.classList.remove("active");
    });

    e.target.classList.add("active");
    tabContent.classList.add("active");
  }
}

customElements.define("my-tabs", Tabs);