JS实现点击切换TAB标签实例
在前端开发中,常常需要实现选项卡切换的功能。本文将介绍如何使用JavaScript来实现点击切换TAB标签,并提供详细的示例代码。
HTML结构
首先,我们需要创建一个HTML结构来容纳选项卡:
---- ------------- ---- ----------- ------------------- ------- ---- ----------- ------------------- ------- ---- ----------- ------------------- ------- ---- --------------------- ---- ------------------ -------------- ------- --- --- - ------ ---- ------------------ -------------- ------- --- --- - ------ ---- ------------------ -------------- ------- --- --- - ------ ------ ------
其中,.tabs
为整个选项卡容器,.tab
为选项卡按钮,data-tab
属性指定了对应的选项卡内容的ID,.tab-contents
为选项卡内容容器,.tab-content
为选项卡内容块,类名同样以对应的选项卡ID结尾。
CSS样式
接下来,我们需要添加一些CSS样式,使得选项卡的外观更加美观:
----- - -------- ----- --------------- ------- ------------ ------- - ---- - ------- -------- -------- ---- ----- ------------- ----- ------- --- ----- ----- -------------- ----- ----------------- -------- - ----------- - ----------------- ------ -------------- --- ----- ------ - ------------- - ------ ----- ------- --- ----- ----- -------- ----- - ------------ - -------- ----- - ------------------- - -------- ------ -
其中,.tabs
使用了Flex布局,使得选项卡按钮水平排列。.tab
表示选项卡按钮的样式,.active
表示当前激活的选项卡按钮的样式。.tab-contents
表示选项卡内容容器的样式,.tab-content
表示选项卡内容块的样式,.active
同样表示当前激活的选项卡内容块的样式。
JavaScript实现
最后,我们需要使用JavaScript来实现点击切换TAB标签的功能:
----- ---- - ---------------------------------- ----- ----------- - ------------------------------------------ ---------------- -- - ----------------------------- -- -- - ----- ----- - ---------------- ---------------- -- -------------------------------- ---------------------------- --------------------------- -- ------------------------------------ -------------------------------------------------------------------------------- --- ---
首先,我们使用querySelectorAll
方法获取所有的选项卡按钮和选项卡内容块。然后,我们为每个选项卡按钮添加了一个click
事件监听器,在点击时执行相应的操作。
具体来说,我们首先从被点击的选项卡按钮上获取data-tab
属性的值,即对应的选项卡内容块的ID。然后,我们遍历所有的选项卡按钮和选项卡内容块,分别将它们的.active
类去掉。接着,我们给被点击的选项卡按钮添加.active
类,同时给对应的选项卡内容块添加.active
类,以显示该选项卡的内容。
总结
本文介绍了如何使用JavaScript来实现点击切换TAB标签的功能。通过HTML、CSS和JavaScript的结合,我们可以轻松地实现这一常见的前端开发需求。
示例代码:https://codepen.io/chatgpt/pen
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/4024