本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考,具体如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.nhooo.com tab切换</title> <style> * { padding: 0; margin: 0 } body { font-size: 12px } ul, li, ol { list-style: none } a { text-decoration: none } .clearfix { clear: both; overflow: hidden } .tab_title ul li { float: left; padding: 0 10px } </style> </head> <body> <div id="Tab1" class="tab clearfix"> <div class="tab_title clearfix"> <ul> <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',1,3)" id="one1">TAB1</a></li> <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',2,3)" id="one2">TAB2</a></li> <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',3,3)" id="one3">TAB3</a></li> </ul> </div> <div class="tab_details clearfix"> <div id="con_one_1" style="display: block;">con_one_1</div> <div style="display: none;" id="con_one_2">con_one_2</div> <div style="display: none;" id="con_one_3">con_one_3</div> </div> </div> <script type="text/javascript"> //tab切换效果 function setTab(name, cursel, n) { for(var i = 1; i <= n; i++) { var menu = document.getElementById(name + i); var con = document.getElementById("con_" + name + "_" + i); menu.className = i == cursel ? "cur" : ""; con.style.display = i == cursel ? "block" : "none"; } } </script> </body> </html>
运行结果:
感兴趣的朋友可以使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun,测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。