简单纯js实现点击切换TAB标签实例资源-CSDN文库

5 浏览量 2020-11-26 05:09:46 上传评论收藏 51KB PDF 举报

一个不需要jQuery实现的tab选项卡切换效果，代码简洁易用。默认是鼠标悬停显示tab效果，可将其中的onmouseover 修改为 onclick 点击效果使用方法： 1、将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可相关链接：几行简单的jQuery代码搞定tab标签切换效果展示效果图：效果展示源码下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt 在本文中，我们将深入探讨如何使用纯JavaScript实现一个简单的点击切换TAB标签的实例。这个实例无需依赖jQuery库，代码简洁且易于理解。默认情况下，它使用鼠标悬停来展示选项卡的效果，但你可以通过修改代码将`onmouseover`事件替换为`onclick`事件，从而实现点击切换。让我们看一下HTML结构。在这个实例中，我们有四个主要的部分：一个包含选项卡的无序列表（`<ul>`），一个用于内容展示的容器（`<div>`），以及相关的CSS样式和JavaScript脚本。 HTML代码如下： ```html <!DOCTYPE html> <html> <head> <title>点击切换选项卡代码</title> <style type="text/css"> /* CSS样式 */ </style> </head> <body> <div class="tab1"> <ul class="menu">  </ul> <div class="menudiv">  </div> </div> <script type="text/javascript"> // JavaScript脚本 </script> </body> </html> ``` CSS样式定义了选项卡的外观和布局。`.tab1`是整个选项卡区域的容器，`.menu`是选项卡的列表，`.menu li`定义了每个选项卡的样式，`.menudiv`则是内容展示区域。当选项卡被选中时，`.off`类会改变其背景色和字体样式。 JavaScript部分中，`setTab`函数负责切换当前选中的选项卡，根据传入的`name`（选项卡组名）和`cursel`（当前选中项的索引）更新DOM元素的类和显示状态。`Next`函数用于自动轮询切换选项卡，`cursel_0`记录当前选中的项，`links_len`是选项卡的总数。页面加载完成后，会为每个选项卡添加`onmouseover`和`onmouseout`事件监听器，以控制自动轮播的启动和停止。为了实现点击切换选项卡，你需要在HTML中设置`onclick`事件监听器。例如，将以下代码添加到每个选项卡的`<li>`标签中： ```html <li onclick="setTab('one', this.id.replace('tab',''))" id="tab1">选项卡1</li> ``` 这里，`onclick`事件调用了`setTab`函数，并传递了当前选项卡的组名（'one'）和索引（通过替换ID中的'tab'得到）。这样，当你点击选项卡时，相应的内容区块将被显示。总结起来，这个纯JavaScript实现的点击切换选项卡实例是一个基本的交互效果，适用于那些希望在项目中实现类似功能但又不希望引入额外库的开发者。通过调整CSS样式和JavaScript脚本，你可以根据需要自定义选项卡的外观和行为，使其适应不同的应用场景。

资源详情

资源评论

资源推荐