选项卡是前端开发中常见的交互效果之一，它可以让用户在不同的选项卡之间切换内容。本文将介绍如何使用 JavaScript 实现一个简单的选项卡效果，帮助读者了解如何利用 JavaScript 控制 DOM 元素的显示和隐藏。
HTML 结构
首先，我们需要准备一个 HTML 结构来定义选项卡的布局。以下示例代码是一个简单的选项卡结构：
---- -------------
--- ------------------
--- ----------------- ---------------- ----------
------ ---------------- ----------
------ ---------------- ----------
-----
---- --------------------
---- --------- ---------- --------
------- - ------------
------- -- --- ------- -- --- ------
------
---- --------- ------------
------- - ------------
------- -- --- ------- -- --- ------
------
---- --------- ------------
------- - ------------
------- -- --- ------- -- --- ------
------
------
------这个结构包含了三个选项卡：Tab 1、Tab 2 和 Tab 3。每个选项卡都由一个链接和一个对应的内容块组成。链接的 href 属性指向对应的内容块的 id。
CSS 样式
接下来，我们需要为选项卡添加一些基本的样式。以下示例代码是一个简单的选项卡样式：
----- ---------- - ----------- ----- ------- -- -------- -- - ----- ---------- -- - -------- ------------- ------- -- - ----- ---------- - - -------- ------ -------- ---- ----- ---------------- ----- ------ ----- -------------- --- --- - -- ----------------- -------- ------- --- ----- ----- -------------- ----- - ----- ---------- --------- - - ----------------- ----- -------------- --- ----- ----- - ----- ------------ ---- - -------- ----- -------- ----- ------- --- ----- ----- ----------- ----- - ----- ------------ ------- - -------- ------ -
这个样式定义了选项卡链接和内容块的样式。默认情况下，所有的内容块都被隐藏了。当用户点击一个选项卡链接时，对应的内容块将会显示出来。
JavaScript 实现
最后，我们需要使用 JavaScript 来实现选项卡效果。以下是一个简单的实现代码：
----- -------- - ------------------------------------- -----
----- ---------- - --------------------------------------- -------
-- ----------
----------------------- ------ -- -
-- --------------
------------------------------ -- -- -
-- ----------------- ------ --
--------------------- -- ---------------------------------
---------------------- -- --------------------------------
-- ----------------- ------ --
-----------------------------
------------------------------------------
---
---这个 JavaScript 实现会遍历所有的选项卡链接，并给每个链接添加一个点击事件监听器。当用户点击一个链接时，实现代码会找到对应的内容块，将其他所有的内容块隐藏，然后显示当前选中的内容
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/1810