js+css实现选项卡滑动门切换特效，这个选项卡特效简洁实用，当用户的鼠标经过时立即切换显示，可根据自己的需求来修改。
<!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>简洁实用js+css滑动门特效_武鸣人</title>
<style>
*{
margin:0px;
padding:0px;
font-size:9pt;
}
#tab_wuming{width:400px;
height:auto;
margin:0 auto;
}
ul{list-style:none; margin-left:20px;}
li{ float:left;height:30px;margin:0 5px;text-align:center;line-height:30px;color:#293863;width:60px; position:relative;bottom:-3px;}/*margin;那里调节各个li之间的距离,position是保证下边框的出现*/
.on_wuming{display:block;}
.off_wuming_ren{display:none;}
.on_wuming_ren{background:url(/img/20240419_www_wuming_ren_1.jpg);}
#all{clear:left; width:400px;}
#all div{width:400px;background-color:#F2F5FA;text-align:left;line-height:20px; height:200px;
border:1px #CCCDCD solid; }/*一定要设border*/
}
</style>
</head>
<script language="javascript">
function g(o) { return document.getElementById(o); }
function showdiv_wuming_ren(i) {
for (j = 1; j <= 3; j++) {
g("wuming_div" + j).className = "off_wuming_ren"//将三个都设为off_wuming_ren，以便将来可以设置显示的那个；
g("wuming_li" + j).className = ""//消除原来所有li的属性
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
g("wuming_div" + i).className = "on_wuming"
g("wuming_li" + i).className = "on_wuming_ren"
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
<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>
<div id="tab_wuming">
<ul>
<li id="wuming_li1" class="on_wuming_ren"><span onmouseover="showdiv_wuming_ren(1)">武鸣一号</span></li>
<li id="wuming_li2"><span onmouseover="showdiv_wuming_ren(2)">武鸣二号</span></li>
<li id="wuming_li3"><span href="#" onmouseover="showdiv_wuming_ren(3)">武鸣三号</span></li>
</ul>
<div id="all">
<div id="wuming_div1" class="on_wuming"><a href="https://www.wuming.ren">武鸣一号内容</a>，各种信息免费发布，资源共享合作共赢！</div>
<div id="wuming_div2" class="off_wuming_ren"><a href="https://www.wuming.ren">武鸣二号内容</a>，各种信息免费发布，资源共享合作共赢！</div>
<div id="wuming_div3" class="off_wuming_ren"><a href="https://www.wuming.ren">武鸣三号内容</a>，各种信息免费发布，资源共享合作共赢！</div>
</div>
</div>
</body>
</html>