简单实用的的选项卡滑动门切换显示特效，点击标题后下拉内容立即切换显示，可根据自己的需求来自定义。
<html>
<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>简单实用DIV滑动门切换特效_武鸣人</title>
<style type="text/css">
*{margin:0;padding:0;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul{list-style:none;}
.menu_wwwwumingren{background:#333;float:left;padding-top:2px;width:100%;}
.menu_wwwwumingren li{float:left;}
.menu_wwwwumingren li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;}
.menu_wwwwumingren .style_www_wuming_ren a {background:#fff;color:#000;}
.con_www_wuming__ren{clear:both;border:2px solid #000;border-top:none;background:#fff;}
.con_www_wuming__ren ul{display:none;padding:15px;line-height:180%;}
</style>
</head>
<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>
<ul class="menu_wwwwumingren">
<li class="style_www_wuming_ren"><a href="javascript:void(0)">武鸣人一号</a></li>
<li><a href="javascript:void(0)">武鸣人二号</a></li>
<li><a href="javascript:void(0)">武鸣人三号</a></li>
<li><a href="javascript:void(0)">武鸣人四号</a></li>
</ul>
<div class="con_www_wuming__ren">
<ul style="display:block;">
<li><a href="https://www.wuming.ren">武鸣人网，各种信息免费发布，资源共享合作共赢！</a><br /><br /><br />这里是一号内容<br /><br /><br />11111</li>
</ul>
<ul>
<li><a href="https://www.wuming.ren">武鸣人网，各种信息免费发布，资源共享合作共赢！</a><br /><br /><br />这里是二号内容<br /><br /><br />22222</li>
</ul>
<ul>
<li><a href="https://www.wuming.ren">武鸣人网，各种信息免费发布，资源共享合作共赢！</a><br /><br /><br />这里是三号内容<br /><br /><br />33333</li>
</ul>
<ul>
<li><a href="https://www.wuming.ren">武鸣人网，各种信息免费发布，资源共享合作共赢！</a><br /><br /><br />这里是四号内容<br /><br /><br />44444</li>
</ul>
</div>
<script>
function $_class(name){
var elements = document.getElementsByTagName("*");
for(s=0;s<elements.length;s++){
if(elements[s].className==name){
return elements[s];
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//tab effects
var tabList = $_class("menu_wwwwumingren").getElementsByTagName("li")
tabCon = $_class("con_www_wuming__ren").getElementsByTagName("ul");
for(i=0;i<tabList.length;i++){
(function(){
var t = i;
tabList[t].onclick = function(){
for(o=0;o<tabCon.length;o++){
tabCon[o].style.display = "none";
tabList[o].className = "";
if(t==o){
this.className = "style_www_wuming_ren";
tabCon[o].style.display = "block";
}
}
}
})()
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</bdoy>
</html>本文来自武鸣人网站，转载请注明出处