基于JS控制DIV显隐的Tab切换实现

作者:半夏

时间:2026-10-24

浏览:119

本文提供一段精简的JavaScript代码,通过控制多个DIV层的display属性实现Tab标签页切换效果。核心逻辑利用ChangeDiv函数接收索引与ID前缀,动态更新内容区域的可见性,适用于基础的前端交互场景。

文章目录

DIV层切换实现代码

<title>DIV层切换</title>  </head> <body> <span onclick="JavaScript:ChangeDiv('0','JKDiv_',2)" style="cursor:hand;">内容一</span> <span onclick="JavaScript:ChangeDiv('1','JKDiv_',2)" style="cursor:hand;">内容二</span> <span onclick="JavaScript:ChangeDiv('2','JKDiv_',2)" style="cursor:hand;">内容三</span> <div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;">内容部分第一区</div> <div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第二区</div> <div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第三区</div> </body> 

注意事项

注意:若代码中引入了外部JavaScript文件,必须在页面完全加载或执行相关脚本后刷新页面,以确保交互功能正常生效。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章