制作 Material Design 的动态 Tab 标签的方法

Material Design 是一种由 Google 推出的设计语言，旨在创造一种更加现代和统一的用户界面设计。其中，Tab 标签是常见的用户界面组件之一，可以帮助用户快速切换不同的内容。在本文中，我们将介绍如何使用 HTML、CSS 和 JavaScript 制作 Material Design 风格的动态 Tab 标签。

HTML 结构

首先，我们需要定义一个基本的 HTML 结构，用于容纳 Tab 标签和其对应的内容。具体代码如下：

// www.javascriptcn.com code example
<div class="tab-container">
  <div class="tab">
    <button class="tab-button active" data-tab="tab1">Tab 1</button>
    <button class="tab-button" data-tab="tab2">Tab 2</button>
    <button class="tab-button" data-tab="tab3">Tab 3</button>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" data-tab="tab1">Content 1</div>
    <div class="tab-pane" data-tab="tab2">Content 2</div>
    <div class="tab-pane" data-tab="tab3">Content 3</div>
  </div>
</div>

其中，.tab-container 是一个容器，.tab 是 Tab 标签的容器，.tab-button 是 Tab 标签按钮的样式，.tab-content 是 Tab 内容的容器，.tab-pane 是每个 Tab 内容的样式。

CSS 样式

接下来，我们需要定义 CSS 样式，使 Tab 标签和其对应的内容具有 Material Design 风格。具体代码如下：

// www.javascriptcn.com code example
.tab-container {
  display: flex;
  flex-direction: column;
}

.tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
  padding: 8px;
  border-radius: 4px 4px 0 0;
}

.tab-button {
  background-color: transparent;
  border: none;
  color: #666;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.tab-button:hover,
.tab-button.active {
  background-color: #2196f3;
  color: #fff;
}

.tab-content {
  background-color: #fff;
  padding: 16px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

其中，我们使用了 flexbox 布局，使 Tab 标签和其对应的内容能够自适应屏幕大小。同时，我们还定义了一些基本的颜色、字体和边框样式，使 Tab 标签具有 Material Design 风格。

JavaScript 交互

最后，我们需要使用 JavaScript 实现 Tab 标签的交互效果。具体代码如下：

// www.javascriptcn.com code example
const tabButtons = document.querySelectorAll('.tab-button');
const tabContent = document.querySelectorAll('.tab-pane');

function initTabs() {
  tabContent[0].classList.add('active');
  tabButtons.forEach((button) => {
    button.addEventListener('click', (event) => {
      const tab = event.target.dataset.tab;
      activateTab(tab);
    });
  });
}

function activateTab(tab) {
  tabButtons.forEach((button) => {
    button.classList.remove('active');
  });

  tabContent.forEach((pane) => {
    pane.classList.remove('active');
    if (pane.dataset.tab === tab) {
      pane.classList.add('active');
    }
  });

  const activeButton = document.querySelector(`[data-tab="${tab}"]`);
  activeButton.classList.add('active');
}

initTabs();

其中，我们首先获取了 Tab 标签按钮和 Tab 内容的 DOM 元素，然后使用 initTabs 函数将第一个 Tab 标签和对应的内容设置为激活状态。接着，我们使用 activateTab 函数来处理 Tab 标签的点击事件，根据点击的 Tab 标签来激活对应的内容和按钮。

示例代码

最后，我们将完整的 HTML、CSS 和 JavaScript 代码整合到一起，形成一个完整的示例：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Material Design Tabs</title>
    <style>
      .tab-container {
        display: flex;
        flex-direction: column;
      }

      .tab {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f5f5f5;
        padding: 8px;
        border-radius: 4px 4px 0 0;
      }

      .tab-button {
        background-color: transparent;
        border: none;
        color: #666;
        font-size: 16px;
        font-weight: 500;
        padding: 8px 16px;
        border-radius: 4px;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
      }

      .tab-button:hover,
      .tab-button.active {
        background-color: #2196f3;
        color: #fff;
      }

      .tab-content {
        background-color: #fff;
        padding: 16px;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      .tab-pane {
        display: none;
      }

      .tab-pane.active {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="tab-container">
      <div class="tab">
        <button class="tab-button active" data-tab="tab1">Tab 1</button>
        <button class="tab-button" data-tab="tab2">Tab 2</button>
        <button class="tab-button" data-tab="tab3">Tab 3</button>
      </div>
      <div class="tab-content">
        <div class="tab-pane active" data-tab="tab1">Content 1</div>
        <div class="tab-pane" data-tab="tab2">Content 2</div>
        <div class="tab-pane" data-tab="tab3">Content 3</div>
      </div>
    </div>
    <script>
      const tabButtons = document.querySelectorAll('.tab-button');
      const tabContent = document.querySelectorAll('.tab-pane');

      function initTabs() {
        tabContent[0].classList.add('active');
        tabButtons.forEach((button) => {
          button.addEventListener('click', (event) => {
            const tab = event.target.dataset.tab;
            activateTab(tab);
          });
        });
      }

      function activateTab(tab) {
        tabButtons.forEach((button) => {
          button.classList.remove('active');
        });

        tabContent.forEach((pane) => {
          pane.classList.remove('active');
          if (pane.dataset.tab === tab) {
            pane.classList.add('active');
          }
        });

        const activeButton = document.querySelector(`[data-tab="${tab}"]`);
        activeButton.classList.add('active');
      }

      initTabs();
    </script>
  </body>
</html>

通过以上代码，我们可以制作出一个简单的 Material Design 风格的动态 Tab 标签。这个示例代码可以帮助初学者理解如何使用 HTML、CSS 和 JavaScript 制作 Tab 标签，同时也可以作为参考代码，用于实现更高级的 Tab 标签效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d25767a941bf7134470280