这是一款实用tab选项卡切换特效，这个选项卡特效未美化，可根据自己的需求来自己修改样式实现美化效果。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>分享一款简单的tab选项卡切换特效_武鸣人</title>
<style>
*{margin:0;padding:0;}
body{line-height:22px}
.on_wumingren{background:#f60;color:#fff}
dl{overflow:hidden;zoom:1;margin-bottom:30px}
dd{float:left;width:100px;text-align:center;list-style:none;cursor:pointer;border:1px #FF0000 solid}
li{display:none;}
</style>
</head>
<body id="body">
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<dl id="nav_www_wuming_ren">
<dd>武鸣人一号</dd>
<dd>武鸣人二号</dd>
<dd>武鸣人三号</dd>
<dd>武鸣人四号</dd>
<dd class="on_wumingren">武鸣人五号</dd>
</dl>
<ul id="bb_wuming_ren">
<li><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！这是一号内容</li>
<li><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！这是二号内容</li>
<li><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！这是三号内容</li>
<li><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！这是四号内容</li>
<li style="display:block"><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！这是五号内容</li>
</ul>
<br /><br /><br />
<div>修改部分 tabs_wuming("nav_www_wuming_ren","bb_wuming_ren") nav_www_wuming_ren bb_wuming_ren对应导航和内容的id</div>
<div>脚本首行 tag1，tag2是对应标签名 addclass是鼠标一上去的导航样式 checkNav,checkWrap是根据class判定导航和内容id里面的标签是否属于滑动门的部分</div>
<script>
function tabs_wuming(e1,e2){
var tag1="dd",tag2="li",addclass="on_wumingren",checkNav="",checkWrap="";
var o1=document.getElementById(e1),o2=document.getElementById(e2),ElementNav=new Array();ElementWrap=new Array();
chk=function(e,n){var v=eval("/"+n+"/gi");if(v==undefined){return true}else if(v.test(e.className)){return true};}
function ser(e,arr,g,n){
var tags=e.getElementsByTagName(g),v=0;
for(i=0;i<tags.length;i++){
if(chk(tags[i],n)==true){arr[v]=tags[i];v++;};
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function Start(e,f){
var s=e.length;
for(i=0;i<s;i++){
e[i].onmouseover=function(){mOver(this)}
}
function mOver(obj){
for(var i=0;i<s;i++){
f[i].style.display="none";
e[i].className="";
}
for(var i=0;i<s;i++){
if(e[i]==obj){f[i].style.display="block";e[i].className=addclass}
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
ser(o1,ElementNav,tag1,checkNav);
ser(o2,ElementWrap,tag2,checkWrap);
Start(ElementNav,ElementWrap)
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
tabs_wuming("nav_www_wuming_ren","bb_wuming_ren")
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处