这篇文章主要介绍了js将滑动门改为选项卡（需鼠标点击）的实现方法,涉及javascript页面元素遍历及样式替换的相关技巧,再通过onmouseover与onclick即可分别实现滑动门与选项卡两种效果,需要的朋友可以参考下
本文实例讲述了js将滑动门改为选项卡（需鼠标点击）的实现方法。分享给大家供大家参考。具体如下：
大家都知道，滑动门和选项卡在布局和结构方面几乎是一样的，唯一不同的是触发方式，这个是由javascript决定的，大致来讲就是将onmouseover改为onclick就行了，本款选项卡以前是款比较流行的滑动门，现在改成了选项卡，大家看看有什么区别。
运行效果截图如下：
具体代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>滑动门改为选项卡</title><style>*{padding:0;margin:0;font-size:12px;}#main{margin:20px;}ul{width:600px;}#tab li{list-style:none;float:left;text-align:center;padding:0;}#tab a{display:block;text-decoration:none;width:94px;line-height:24px;}#cont{clear:both;border:1px solid blue;border-top:0;width:562px!important;width:564px;height:190px;overflow-y:hidden;}.common{margin:5px;}.common li{list-style:none;padding-left:14px!important;padding-left:0;padding-top:4px;}.common li a{text-decoration:none;}.common li a:hover{color:red;}.on{background:url(images/tabs3.gif) no-repeat left bottom;}.off{background:url(images/tabs2.gif) no-repeat left bottom;}</style><script>function $(id){return document.getelementbyid(id)}function showtab(id){for(var i=1;i<7;i++){if(id==i){$('tab'+i).blur();$("tab"+i).classname="on";$("cont"+i).style.display="block";}else{$("tab"+i).classname="off";$("cont"+i).style.display="none";}}return false;}</script></head><body><p id="main"><p id="tab"><ul><li><a href="javascript:void(0)" id="tab1" class="on" onclick="showtab('1')">c#源代码</a></li><li><a href="javascript:void(0)" id="tab2" class="off" onclick="showtab('2')">vb源代码</a></li><li><a href="javascript:void(0)" id="tab3" class="off" onclick="showtab('3')">vc源代码</a></li><li><a href="javascript:void(0)" id="tab4" class="off" onclick="showtab('4')">jquery脚本</a></li><li><a href="javascript:void(0)" id="tab5" class="off" onclick="showtab('5')">delphi代码</a></li><li><a href="javascript:void(0)" id="tab6" class="off" onclick="showtab('6')">java源代码</a></li></ul></p><p id="cont" ><p id="cont1" class="common" style="display:block;"><li><a href="#" target="_blank">30多个c#基础学习实例</a></li></p><p style="display:none;" id="cont2" class="common"><li><a href="#" target="_blank">vb仿photoshop曲线调整图像亮度源程序</a></li></p><p style="display:none;" id="cont3" class="common"><li><a href="#" target="_blank">vc仿realoneplayer播放器的窗体界面</a></li></p><p style="display:none;" id="cont4" class="common"><li><a href="#" target="_blank">farbtastic jquery圆形网页取色插件</a></li></p><p style="display:none;" id="cont5" class="common"><li><a href="#" target="_blank">delphi基础学习实例代码</a></li></p><p style="display:none;" id="cont6" class="common"><li><a href="#" target="_blank">java图书管理程序代码</a></li></p></p></p></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
原生js模拟淘宝购物车的介绍
js实现带有3d立体感的银灰色竖排折叠菜单的代码
以上就是js将滑动门改为选项卡的实现方法的详细内容。