在 Web 开发中，我们经常需要在页面上实现选项卡（Tab）切换效果来展示不同的内容。这篇文章将介绍如何使用 JavaScript 实现简单、易用的 Tab 切换效果，并提供示例代码和指导意义。
HTML 结构
我们先定义好 HTML 结构，一般情况下，一个 Tab 选项卡由标题和内容两部分组成，可以使用 <ul> 和 <li> 元素来表示标题，使用 <div> 元素来表示内容：
-- -------------------- ---- -------
---- ------------
--- ----------------
--- ------------------ ------
------- ------
------- ------
-----
---- --------------------
---- --------------- --------------- -------
---- ------------------------ -------
---- ------------------------ -------
------
------其中，tab-nav 表示 Tab 的标题栏，tab-content 表示 Tab 的内容区域，active 类名表示当前激活的 Tab。
CSS 样式
为了让 Tab 界面更美观，我们可以添加一些 CSS 样式：
-- -------------------- ---- ------- ---- - ------- --- ----- ----- -------- ----- - -------- - ----------- ----- ------- -- -------- -- - -------- -- - ------ ----- ------------- ----- ------- -------- - -------- --------- - ------------ ----- - ------------ --------- - -------- ----- - ------------ ------- - -------- ------ -
这些样式将为 Tab 界面提供基本的外观效果。
JavaScript 实现
接下来，我们使用 JavaScript 实现 Tab 切换功能。首先，我们需要获取 Tab 的标题栏和内容区域元素：
const tabs = document.querySelector('.tab');
const navItems = tabs.querySelectorAll('.tab-nav li');
const contentItems = tabs.querySelectorAll('.tab-content .tab-pane');然后，我们给每个 Tab 标题添加事件监听器，当用户点击标题时，就将当前 Tab 的激活状态设置为 active，并将其他 Tab 取消激活状态：
-- -------------------- ---- -------
----------------------- ------ -- -
------------------------------ -- -- -
-- ----- --- ----
--------------------- -- ---------------------------------
-----------------------------
-- -------
---------------------------- -- ------------------------------------
--------------------------------------------
---
---最后，我们需要设置默认选中的 Tab。我们可以在 HTML 结构中为某个 Tab 添加 active 类名，或者在 JavaScript 中手动设置一个默认选中的 Tab：
// 手动设置默认选中的 Tab navItems[0].click();
至此，我们已经完成了 Tab 切换效果的实现。
示例代码
完整的 HTML、CSS 和 JavaScript 代码如下所示：
-- -------------------- ---- -------
---- ------------
--- ----------------
--- ------------------ ------
------- ------
------- ------
-----
---- --------------------
---- --------------- --------------- -------
---- ------------------------ -------
---- ------------------------ -------
------
------
-------
---- -
------- --- ----- -----
-------- -----
-
-------- -
----------- -----
------- --
-------- --
-
-------- -- -
------ -----
------------- -----
------- --------
-
-------- --------- -
------------ -----
-
------------ --------- -
-------- -----
-
------------ ------- -
-------- ------
-
--------
--------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------