通过js实现多项滑动门特效，当用户的鼠标经过时立即切换显示，可根据iji的需求来自定义选项卡数量。
<!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实现多项选项卡滑动门切换特效_武鸣人</title>
<style media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
/* 标准盒模型 */
.ttl{height:18px;}
.ctt_wuming_ren{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.936_wuming_ren{margin:2px 0;clear:both;width:936px;/*滑动门的宽度*/}
/* TAB 切换效果 */
.tab_wuming_{background-image: url('/img/20240420_www_wuming_ren_16.gif'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tab_wuming_ ul{height:24px;}
.tab_wuming_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/* 控制显示与隐藏css类 */
.nor_wuming{ background-image:url('/img/20240420_www_wuming_ren_17.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab_wuming{ background-image: url('/img/20240420_www_wuming_ren_18.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis_wuming_ren{display:block;}
.undis_wuming_ren{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o) { return document.getElementById(o); }
function hover_wuming_ren(n) {
//如果有N个标签,就将i<=N;
for (var i = 1; i <= 6; i++) { g('tab_wuming_' + i).className = 'nor_wuming'; g('tab_wuming_0' + i).className = 'undis_wuming_ren'; } g('tab_wuming_0' + n).className = 'dis_wuming_ren'; g('tab_wuming_' + n).className = 'hovertab_wuming';}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</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>
<div class="936_wuming_ren">
<div id="tab_wuming_" class="tab_wuming_">
<ul>
<li id="tab_wuming_1" class="hovertab_wuming" onmouseover="x:hover_wuming_ren(1);">武鸣人一号</li>
<li id="tab_wuming_2" class="nor_wuming" onmouseover="i:hover_wuming_ren(2);">武鸣人二号</li>
<li id="tab_wuming_3" class="nor_wuming" onmouseover="a:hover_wuming_ren(3);">武鸣人三号</li>
<li id="tab_wuming_4" class="nor_wuming" onmouseover="o:hover_wuming_ren(4);">武鸣人四号</li>
<li id="tab_wuming_5" class="nor_wuming" onmouseover="g:hover_wuming_ren(5);">武鸣人五号</li>
<li id="tab_wuming_6" class="nor_wuming" onmouseover="z:hover_wuming_ren(6);">武鸣人六号</li>
</ul>
</div>
<div class="ctt_wuming_ren">
<div class="dis_wuming_ren" id="tab_wuming_01"><a href="https://www.wuming.ren">武鸣人一号内容</a>，各种信息免费发布，资源共享合作共赢！</div>
<div class="undis_wuming_ren" id="tab_wuming_02"><a href="https://www.wuming.ren">武鸣人二号内容</a>，各种信息免费发布，资源共享合作共赢！</div>
<div class="undis_wuming_ren" id="tab_wuming_03"><a href="https://www.wuming.ren">武鸣人三号内容</a>，各种信息免费发布，资源共享合作共赢！</div>
<div class="undis_wuming_ren" id="tab_wuming_04"><a href="https://www.wuming.ren">武鸣人四号内容</a>，各种信息免费发布，资源共享合作共赢！</div>
<div class="undis_wuming_ren" id="tab_wuming_05"><a href="https://www.wuming.ren">武鸣人五号内容</a>，各种信息免费发布，资源共享合作共赢！</div>
<div class="undis_wuming_ren" id="tab_wuming_06"><a href="https://www.wuming.ren">武鸣人六号内容</a>，各种信息免费发布，资源共享合作共赢！</b>
</div>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处