实用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" xml:lang="en">
<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 type="text/css">
*{margin: 0; padding: 0; }
li{ list-style: none; }
.www_wuming_ren{ width: 154px; margin: 100px auto; }
#wuming_ren_l{ width: 154px; height: 30px; }
#wuming_ren_l li { float: left; width: 75px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #333; border-bottom: none; }
#wuming_ren_l li.on { background: #333; color: #fff; }
#wuming_ren_r{ width: 152px; height: 50px; border: 1px solid #ddd; border-top: 1px solid #333; }
#wuming_ren_r p { display: none; line-height: 50px; }
</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>
<ul id="wuming_ren_l">
<li>一号选项</li>
<li>二号选项</li>
</ul>
<div id="wuming_ren_r">
<p style="display: block;">武鸣人一号选项卡</p>
<p>武鸣人二号选项卡</p>
</div>
</div>
<script type="text/javascript">
new function(){
var t = document.getElementById("wuming_ren_l").getElementsByTagName("li");
var c = document.getElementById("wuming_ren_r").getElementsByTagName("p");
var l = t.length;
var last_cap = t[0];
for(var i=0;i<l;i++) init_tab(t[i], c[i]);
function init_tab(cap, body){
cap.onmouseover=function(){
if (last_cap) last_cap.deactive();
(last_cap = cap).className="on"; body.style.display = "block";
}
cap.deactive = function(){ this.className=""; body.style.display="none"; }
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处