纯css+js写的一个简单的tab标签页带样式

下面是详细的攻略：

1. 简介

在网页设计中，常见的需求是需要通过标签页来展示内容，这时候就需要用到一个叫做“Tab标签页”的组件。Tab标签页可以让我们在有限的空间内，方便地切换内容，增加页面的互动性，使页面看起来更加充实。

本文将介绍一种纯CSS+JS的方式来实现一个简单的Tab标签页，并带有基本的样式，让菜鸟级别的前端设计师也能够轻松上手。

2. 实现步骤

2.1 HTML代码结构

首先，我们需要创建一个基本的HTML结构。通过以下代码创建一个Tab标签页布局：

<div class="tab">
  <button class="tablinks active" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>

  <div id="tab1" class="tabcontent">
    <h3>Tab 1</h3>
    <p>Content for Tab 1</p>
  </div>

  <div id="tab2" class="tabcontent">
    <h3>Tab 2</h3>
    <p>Content for Tab 2</p>
  </div>

  <div id="tab3" class="tabcontent">
    <h3>Tab 3</h3>
    <p>Content for Tab 3</p>
  </div>
</div>

以上代码中包含三个Tab按钮和三个内容区域。其中，.tab类指整个Tab标签页区域，.tablinks类用于Tab按钮，.tabcontent类用于内容区域。每个内容区域通过一个唯一的id来标识。在这个例子中，我们创建了三个内容区域，分别对应三个Tab按钮。

2.2 CSS样式

接下来，我们使用CSS样式来设计我们的Tab标签页。通过以下代码设置样式：

/* 关闭按钮边界 */
* {
  box-sizing: border-box;
}

.tab {
  border: 1px solid #ccc;
  overflow: hidden;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: white;
}

上述代码中，我们为Tab标签页的按钮、内容区域、整个Tab区域等设置了样式，包括了背景色、边框、内外边距、鼠标指针等。

其中，.tab button.active指的是Tab按钮处于激活状态时的样式，.tabcontent指的是内容区域的样式。通过设置.tabcontent的display属性为none，我们在一开始隐藏了所有的内容区域。

2.3 JavaScript脚本

最后，我们需要使用JavaScript来完成一些动态效果（如，点击切换Tab时，激活相应的内容区域）。通过以下代码实现：

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  // 隐藏所有内容区域
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // 关闭所有Tab按钮的激活状态
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // 显示当前内容区域和激活状态按钮
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

以上代码中，openTab()函数是用来实现Tab切换的。当点击一个Tab按钮时，它会隐藏其他所有内容区域，并关闭其他所有Tab按钮的激活状态，然后激活当前Tab按钮和相应的内容区域。

3. 示例

为了更好的向读者展示上述代码的效果，我们提供两个示例。第一个示例展示了我们上述实现代码的示例演示，第二个示例展示了我们如何自定义Tab标签页的样式。

示例1：

通过以下链接查看我们实现的Tab标签页效果：
https://codepen.io/Songhui/pen/bjrRyp

示例2：

通过以下链接查看如何自定义Tab标签页的样式：
https://codepen.io/Songhui/pen/maByXp