如何使用 CSS 和一点 JavaScript 构建响应式标签组件

在本教程中，我们将学习如何使用 css 和一些 javascript 构建响应式标签组件。完全可以创建纯 CSS 选项卡组件，但是对于这个示例，让我们将 JavaScript 技能付诸实践。

这是我们将要构建的内容，分几个大步骤：

See the Pen How to Build a Responsive Tab Component With CSS and a Touch of JavaScript by Envato Tuts+ (@tutsplus) on CodePen.

注意：

信息本教程不会关注如何使选项卡组件可访问，因此探索可访问性肯定是一个有效的下一步。

1. html

首先，让我们检查所需的标记。我们有一个容器，其中包含选项卡本身（列表项）以及每个选项卡的内容（选项卡面板）。要将选项卡与相应的面板相关联，我们使用data-index自定义属性，该属性为每个选项卡面板保存一个唯一值。也就是说，由于从零开始编号，一个面板与data-index = 0第一个选项卡相关联，一个面板与 data-index = 1第二个选项卡相关联，依此类推。

这是 HTML 标记：

<div class="tabs-container">
  <ul class="tabs">
    <li class="active">
      <a href="">Part 1</a>
    </li>
    <li>
      <a href="">Part 2</a>
    </li>
    <li>
      <a href="">Part 3</a>
    </li>
  </ul>
  <div class="tabs-content">
    <div class="tabs-panel active" data-index="0">
      
    </div>
    <div class="tabs-panel" data-index="1">
      
    </div>
    <div class="tabs-panel" data-index="2">
      
    </div>
  </div>
</div>

2.CSS _

下一步，让我们为我们的组件指定一些 CSS 规则。没什么花哨的，只是一些基本的款式。需要注意的一点是，我们不使用任何过渡（例如淡入淡出、滑动）在选项卡面板之间切换；相反，这些会通过一个简单的开/关开关出现和消失。

以下是初始样式：

.tabs-container {
  max-width: 1000px;
  margin: 50px auto;
  padding: 25px;
}

.tabs {
  display: flex;
}

.tabs li:not(:last-child) {
  margin-right: 7px;
}

.tabs li a {
  display: block;
  position: relative;
  top: 4px;
  padding: 10px 25px;
  border-radius: 2px 2px 0 0;
  background: white;
  opacity: 0.7;
  transition: all 0.1s ease-in-out;
}

.tabs li.active a,
.tabs li a:hover {
  opacity: 1;
  top: 0;
}

.tabs-content {
  position: relative;
  z-index: 2;
  padding: 25px;
  border-radius: 0 4px 4px 4px;
  background: white;
}

.tabs-panel {
  display: none;
}

.tabs-panel.active {
  display: block;
}

3. javaScript

有了 HTML 和 CSS，就该查看所需的 JavaScript 代码了。

每次单击选项卡时，我们都会执行以下操作：

active从相应的选项卡（默认为第一个）和关联的选项卡面板（默认为第一个）中删除该类。
找到li此选项卡的父项，将active类添加到其中，并检索其索引。
找到其属性值（对于data-index属性）与上述索引值匹配的选项卡面板，并将active类分配给它。

这是生成的 JavaScript 代码：

const tabLinks = document.queryselectorAll(".tabs a");
const tabPanels = document.querySelectorAll(".tabs-panel");

for(let el of tabLinks) {
  el.addeventListener("click", e => {
    e.preventDefault();

    document.querySelector('.tabs li.active').classList.remove("active");
    document.querySelector('.tabs-panel.active').classList.remove("active");

    const parentListItem = el.parentElement;
    parentList.classList.add("active");
    const index = [...parentListItem.parentElement.children].indexOf(parentListItem);

    const panel = [...tabPanels].filter(el => el.getAttribute("data-index") == index);
    panel[0].classList.add("active");
  });
}

4. 响应迅速

我们的组件几乎准备好了！我们要做的最后一件事是使组件响应。因此，例如，当视口的最大宽度为 600 像素时，它应该折叠并如下所示：

当我们使用桌面优先的方法时，这些是我们必须覆盖的 CSS 规则：

@media screen and (max-width: 600px) {
  .tabs {
    flex-direction: column;
  }

  .tabs li {
    width: 100%;
  }

  .tabs li:not(:last-child) {
    margin-right: 0;
  }

  .tabs li a {
    border-radius: 0;
    opacity: 1;
    top: 0;
  }

  .tabs li.active a::before {
    content: '•';
    padding-right: 5px;
  }

  .tabs-content {
    border-radius: 0;
  }
}