一个精简的JS DIV层tab切换代码
DIV层点击切换
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <title>DIV层点击切换</title> <script language="JavaScript" type="text/javascript"> function ChangeDiv(divId,divName,zDivCount) { for(i=0;i< =zDivCount;i++) { document.getElementById(divName+i).style.display="none"; //将所有的层都隐藏 } document.getElementById(divName+divId).style.display="block"; //显示当前层 } </script> <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> |
DIV层滑过切换
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <title>DIV层切换</title> </script><script language="JavaScript" type="text/javascript"> function ChangeDiv(divId,divName,zDivCount) { for(i=0;i< =zDivCount;i++) { document.getElementById(divName+i).style.display="none"; //将所有的层都隐藏 } document.getElementById(divName+divId).style.display="block"; //显示当前层 } </script> <body> <span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)" style="cursor:hand;">内容一</span> <span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)" style="cursor:hand;">内容二</span> <span onMouseMove="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> |
[cc lang=”php”]
浅唱6(微信/QQ号:909912499),欢迎分享本文,转载请保留出处!部分内容来自网络,如有侵权请联系删除处理!
相关信息
本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。
如有需要请加QQ: 909912499