很实用的鼠标经过自动切换选项卡特效，可自由选择滑动或点击方式，这个选项卡兼容当前主流浏览器。
<!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>
<script>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);/* wuming1 */
var con=document.getElementById("con_"+name+"_"+i);/* con_wuming_1 */
menu.className=i==cursel?"hover":"";/*三目运算 等号优先*/
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
<style type="text/css">
.www_wuming_ren_show{display:none;width:490px;height:200px;border:1px solid #CCCCCC;}
#con_wuming_1{display:block;}
#menubox{width:500px;height:24px;margin-bottom:7px;}
#menubox ul{margin:0;padding:0;}
#menubox ul li{float:left;list-style:none;display:inline;padding-top:7px;border:1px solid #D1D1D1;border-bottom:0px;margin:0 10px;white-space:nowrap; text-
overflow:ellipsis;cursor:pointer;width:60px;height:24px;text-align:center;font-size:14px;overflow:visible;}
#menubox ul li.hover{border-top:2px solid #D1D1D1;border-right:2px solid #D1D1D1;border-left:2px solid #D1D1D1;color: #000000;font-weight:bold;border-bottom:0px solid #D1D1D1;}
</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>
<div id="main">
<div id="menubox">
<!--样式1 滑动选项卡-->
<ul>
<li id="wuming1" onmousemove="setTab('wuming',1,6)" class="hover">武鸣人1</li>
<li id="wuming2" onmousemove="setTab('wuming',2,6)">武鸣人2</li>
<li id="wuming3" onmousemove="setTab('wuming',3,6)">武鸣人3</li>
<li id="wuming4" onmousemove="setTab('wuming',4,6)">武鸣人4</li>
<li id="wuming5" onmousemove="setTab('wuming',5,6)">武鸣人5</li>
<li id="wuming6" onmousemove="setTab('wuming',6,6)">武鸣人6</li>
</ul>
<!--样式2 点击选项卡 -->
<!--
<ul>
<li id="wuming1" onclick="setTab('wuming',1,6)" class="hover"><a>武鸣人</a></li>
<li id="wuming2" onclick="setTab('wuming',2,6)"><a>武鸣人</a></li>
<li id="wuming3" onclick="setTab('wuming',3,6)"><a>武鸣人</a></li>
<li id="wuming4" onclick="setTab('wuming',4,6)"><a>武鸣人</a></li>
<li id="wuming5" onclick="setTab('wuming',5,6)"><a>武鸣人</a></li>
<li id="wuming6" onclick="setTab('wuming',6,6)"><a>武鸣人</a></li>
</ul>
-->
</div>
<div id="conten">
<div class="www_wuming_ren_show" id="con_wuming_1">
<p><a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！1</p>
</div>
<div class="www_wuming_ren_show" id="con_wuming_2">
<p><a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！2</p>
</div>
<div class="www_wuming_ren_show" id="con_wuming_3">
<p><a href="https://wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布3！</p>
</div>
<div class="www_wuming_ren_show" id="con_wuming_4">
<p><a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！4</p>
</div>
<div class="www_wuming_ren_show" id="con_wuming_5">
<p><a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！5</p>
</div>
<div class="www_wuming_ren_show" id="con_wuming_6">
<p><a href="https://wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！6</p>
</div>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处