使用 JavaScript 实现 Tab 标签切换效果
Tab 标签在网页设计中是非常常见的交互元素之一。通过点击标签，用户可以轻松地切换不同的内容和功能。在这篇文章中，我们将学习使用 JavaScript 来实现一个简单的 Tab 切换效果，并分享代码示例。
HTML 结构
首先，我们需要创建 HTML 结构来容纳 Tab 标签和相关的内容。在本例中，我们将创建一个简单的结构，其中包含三个 Tab 标签和相应的内容：
---- ------------- ---- ---------- ------- ---------------- ------- ---- ----------- ---------------- ------- ---- ----------- ---------------- ------- ------ ---- -------------------- ---- --------------- ------- -------------------- ------- ---- ---------------- -------------------- ------- ---- ---------------- -------------------- ------- ------
在上面的代码中，我们使用了两个 div 元素，分别用于存放 Tab 标签和内容。每个 Tab 标签都有一个 data-tab 属性，用于指定与之关联的内容元素。默认情况下，第一个 Tab 标签和相应的内容元素被标记为“active”。
CSS 样式
接下来，我们需要添加一些 CSS 样式来美化 Tab 标签和内容。在本例中，我们将使用基本的样式来使其看起来更整洁：
----- - -------- ----- ---------------- -------------- ------------ ------- -------------- ----- - ---- - ------- -------- -------- ----- ------- --- ----- ----- -------------- ----- ----------------- -------- - ----------- - ----------------- ----- -------------- --- ----- ----- - ------------ - ------- --- ----- ----- -------- ----- - --------- - -------- ----- - ---------------- - -------- ------ -
在上面的代码中，我们使用了一些基本样式，包括灰色边框、白色背景和间距。同时，我们还通过 .active 类为当前选中的 Tab 标签和内容元素添加了不同的样式。
JavaScript 代码
现在，让我们开始实现 JavaScript 代码来使 Tab 切换效果生效。我们将使用事件监听器来响应 Tab 标签的点击，并根据点击的标签来显示相应的内容。
----- ---- - ----------------------------------
----- ----------- - ---------------------------------------
-------- ---------------- -
----- --------- - --------------------------------------
----- ---------------- - -------------------------------------------
-- ------ ------ ----- ---- --- ---- --- --------
--- ---- - - -- - - ------------ ---- -
-----------------------------------
------------------------------------------
-
-- --- ------ ----- -- ------- --- --- -------
----- ---------- - -------------
----- --------- - ------------------------------------
----- ------------- - -------------------------------------------------------------
-----------------------------------
--------------------------------------
-
-- ------ ----- --------- -- --- ----
--- ---- - - -- - - ------------ ---- -
--------------------------------- -----------
-在上面的代码中，我们使用了 querySelectorAll 方法来选择所有 Tab 标签和内容元素。然后，我们定义了一个 changeTab 函数来处理标签的点击事件。该函数首先查找当前激活的 Tab 标签和内容元素，并将其移除“active”类。接着，该函数读取被点击的 Tab 标签的 data-tab 属性
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/4155