在前端开发中，经常需要实现 TAB 标签的切换效果。本文将介绍一种简单纯 JavaScript 实现点击切换 TAB 标签的方法，并提供示例代码。
HTML 结构
首先，我们需要在 HTML 中创建一个包含所有 TAB 标签的容器，并为每个标签设置一个唯一的 ID。例如：
---- ------------------- ---- --------- --------------- ------- ---- --------- --------------- ------- ---- --------- --------------- ------- ------
其中，tab-container 是整个 TAB 标签的容器，tab 类用于样式控制。
接下来，在 HTML 中创建一个与 TAB 标签对应的内容容器，并为每个容器设置一个唯一的 ID。例如：
---- ----------------------- ---- ------------- ----------------------- ------- ---- ------------- ----------------------- ------- ---- ------------- ----------------------- ------- ------
其中，content-container 是整个内容容器的父级容器，content 类用于样式控制。
CSS 样式
我们需要为 TAB 标签和内容容器添加一些基本的 CSS 样式。例如：
---- - -------- ------------- -------- ----- ------- --- ----- ----- ------- -------- - ------- - ----------------- ----- - -------- - -------- ----- -------- ----- ------- --- ----- ----- - ----- - -------- ------ -
其中，.tab 类定义了 TAB 标签的样式，.active 类定义了当前选中标签的样式，.content 类定义了容器的样式，.show 类定义了当前显示内容的样式。
JavaScript 实现
在 JavaScript 中，我们需要为每个 TAB 标签添加点击事件，并控制相应的内容容器的显示和隐藏。例如：
--- ---- - ----------------------------------
--- -------- - --------------------------------------
--- ---- - - -- - - ------------ ---- -
--------------------------------- ---------- -
-- --------
--- ---- - - -- - - ---------------- ---- -
-------------------------------------
-
-- ---- --- -------
--- ---- - - -- - - ------------ ---- -
-----------------------------------
-
-- ---- --- ---------
--- ------ - --------------------
------------------------------------------------------
-- ---- --- -------
-----------------------------
---
-首先，我们通过 querySelectorAll 方法获取所有 TAB 标签和内容容器。然后，为每个 TAB 标签添加点击事件，当点击 TAB 标签时，我们先隐藏所有的内容容器，再取消所有 TAB 标签的激活状态。接着，根据当前点击的 TAB 标签的 data-target 属性，获取对应的内容容器，并将其显示出来。最后，将当前点击的 TAB 标签设置为激活状态。
完整示例代码
--------- -----
------
------
----- ----------------
---------- ----------
-------
---- -
-------- -------------
-------- -----
------- --- ----- -----
------- --------
-
------- -
----------------- -----
-
-------- -
-------- -----
-------- -----
------- --- ----- -----
-
----- -
-------- ------
-
--------
-------
------
- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------