简单小巧的JavaScript Tab滑动门特效

发布时间：2014-07-31 17:36:41　来源/作者：学技巧网页制作　分类：导航菜单阅读：0次点评一下

<html> <head> <title>简洁TAB</title> <script type="text/javascript"> function nTabs(thisObj, Num) { if (thisObj.className == "active") return; var tabList = document.getElementById("myTab").getElementsByTagName("li"); for (i = 0; i < tabList.length; i++) {//点击之后，其他tab变成灰色，内容隐藏，只有点击的tab和内容有属性 if (i == Num) { thisObj.className = "active"; document.getElementById("myTab_Content" + i).style.display = "block"; } else { tabList[i].className = "normal"; document.getElementById("myTab_Content" + i).style.display = "none"; } } } </script> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; font-size: 14px; } .nTab { width: 500px; height: 200px; margin: 20px auto; border: 1px solid #333; overflow: hidden; } .none { display: none; } .nTab .TabTitle li { float: left; cursor: pointer; height: 35px; line-height: 35px; font-weight: bold; text-align: center; width: 124px; } .nTab .TabTitle li a { text-decoration: none; } .nTab .TabTitle .active { background: black; color: #336699; } .nTab .TabTitle .normal { color: #F1AC1C; } .nTab .TabContent { clear: both; overflow: hidden; background: #fff; padding: 5px; display: block; height: 100px; } </style> </head> <body> <div class="nTab"> <div class="TabTitle"> <ul id="myTab"> <li class="active" onclick="nTabs(this,0);">网站模板</li> <li class="normal" onclick="nTabs(this,1);">网页模板</li> <li class="normal" onclick="nTabs(this,2);">织梦模板</li> <li class="normal" onclick="nTabs(this,3);">网页特效</li> </ul> </div> <div class="TabContent"> <div id="myTab_Content0"> 同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选v同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选</div> <div id="myTab_Content1" class="none"> 兼容性好2</div> <div id="myTab_Content2" class="none"> 兼容性好3</div> <div id="myTab_Content3" class="none"> 兼容性好4</div> </div> </div> </body> </html>

(www.xuejiqiao.com)提示：可修改后再运行代码!

把 onclick="nTabs(this,0) 变成 onmouserover="nTabs(this,0),可以做一个鼠标放上去就换内容的效果

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！

学技巧网站制作

简单小巧的JavaScript Tab滑动门特效

jQuery点击切换/自动切换选项卡效果js代码

一段实用简洁大方滑动的Tab选项卡JS特效代码