简单实现 JavaScript 选项卡切换效果
在前端开发中，选项卡切换是常用的交互方式之一。本文将介绍如何使用纯 JavaScript 实现一个简单的选项卡切换效果。
HTML 结构
选项卡通常由一个导航条和多个内容面板组成。HTML 结构如下：
---- ------------
--- ------------
------ ----------------------------
------ ----------------------------
------ ----------------------------
-----
---- ---------------
---- ---------------------
---- ---------------------
---- ---------------------
------
------其中，.tab 是选项卡容器，.nav 是导航条，.panels 是内容面板，#panel1、#panel2、#panel3 是对应的面板 ID。
CSS 样式
为了让选项卡更加美观，我们需要添加一些样式。这里只提供一个简单的样式示例：
---- ---- - -------- ----- ---------------- -------------- ------------ ------- -------- -- ------- -- ----------------- ----- - ---- ---- -- - ----------- ----- - ---- ---- - - -------- ------ -------- ---- ----- ------ ----- ---------------- ----- - ---- ---- -------- - ----------------- ----- - ---- ------- - ------- --- ----- ----- -------- ----- -
JavaScript 实现
使用纯 JavaScript 实现选项卡切换的关键在于事件监听和样式控制。
首先，选项卡默认显示第一个面板。我们需要给第一个面板添加 .active 类：
----------------------------------------------------------
然后，我们需要监听导航条中的链接点击事件，在点击时切换对应面板的可见性，并修改链接的样式：
----- -------- - ------------------------------- ---- ----
--------------------- -- -
------------------------------ ----- -- -
-----------------------
-- --------
----- ------- - --------------------------
----- ------ - ------------------------------- ------- - ------
-------------------- -- -
-- --------- --- --------------------- -
------------------------------
- ---- -
---------------------------------
-
---
-- -------
--------------------- -- ---------------------------------
-----------------------------
---
---最后，我们需要实现选项卡容器的基本功能，比如自动调整面板高度等：
----- --- - -------------------------------
--------------------------------- -- -- -
----- ----------- - ---------------------------- ------- - -------------
-- ------------- -
---------------- - --------------------------------
-
---
------------------------ -----------------完整示例代码
HTML：
---- ------------
--- ------------
------ ----------------------------
------ ----------------------------
------ ----------------------------
-----
---- ---------------
---- ---------------------
---- ---------------------
---- ---------------------
------
------CSS：
---- ---- - -------- ----- ---------------- -------------- ------------ ------- -------- -- ------- -- ----------------- ----- - ---------------------------------------------------------- -------- -------------------------------------------------------------------------------------