实用的tab选项卡切换显示特效分享，当用户的鼠标经过时选项卡立即切换显示，背景图片也跟随着切换显示。
<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>js+css实现个性tab选项卡切换显示特效_武鸣人</title>
<style type="text/css">
<!--
body,td{font-size: 12px;}
.tab{margin-top:100px}
#wwwwumingren1{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#wwwwumingren2{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#wwwwumingren3{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
.wuming_ren1{width:346px;height:27px;line-height:27px;background-image:url(/img/20240420_www_wuming_ren_5.jpg);cursor:pointer;}
.wuming_ren2{width:346px;height:27px;line-height:27px;background-image:url(/img/20240420_www_wuming_ren_6.jpg);cursor:pointer;}
.wuming_ren3{width:346px;height:27px;line-height:27px;background-image:url(/img/20240420_www_wuming_ren_7.jpg);cursor:pointer;}
.tab1{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;}
.tab2{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
.tab3{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
-->
</style>
</head>
<body style="text-align:center">
<script type=text/javascript>
function settab_wuming_ren(i) {
select_wuming_ren(i);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function select_wuming_ren(i) {
switch (i) {
case 1:
document.getElementById("wwwwumingren1").style.display = "block";
document.getElementById("wwwwumingren2").style.display = "none";
document.getElementById("wwwwumingren3").style.display = "none";
document.getElementById("wuming_ren1").style.color = "#000000";
document.getElementById("wuming_ren2").style.color = "#ffffff";
document.getElementById("wuming_ren3").style.color = "#ffffff";
break;
case 2:
document.getElementById("wwwwumingren1").style.display = "none";
document.getElementById("wwwwumingren2").style.display = "block";
document.getElementById("wwwwumingren3").style.display = "none";
document.getElementById("wuming_ren1").style.color = "#ffffff";
document.getElementById("wuming_ren2").style.color = "#000000";
document.getElementById("wuming_ren3").style.color = "#ffffff";
break;
case 3:
document.getElementById("wwwwumingren1").style.display = "none";
document.getElementById("wwwwumingren2").style.display = "none";
document.getElementById("wwwwumingren3").style.display = "block";
document.getElementById("wuming_ren1").style.color = "#ffffff";
document.getElementById("wuming_ren2").style.color = "#ffffff";
document.getElementById("wuming_ren3").style.color = "#000000";
break;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
<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="tab">
<div id="bg_wuming" class="wuming_ren1">
<div id="wuming_ren1" class="tab1" onMouseOver="settab_wuming_ren(1);document.getElementById('bg_wuming').className='wuming_ren1'">武鸣人一号内容</div>
<div id="wuming_ren2" class="tab2" onMouseOver="settab_wuming_ren(2);document.getElementById('bg_wuming').className='wuming_ren2'">武鸣人二号内容</div>
<div id="wuming_ren3" class="tab3" onMouseOver="settab_wuming_ren(3);document.getElementById('bg_wuming').className='wuming_ren3'">武鸣人三号内容</div>
</div>
<div id=wwwwumingren1><a href="https://www.wuming.ren">武鸣人一号内容</a>，各种信息免费发布，资源共享合作共赢！</div>
<div id=wwwwumingren2 style="display:none"><a href="https://www.wuming.ren">武鸣人二号内容</a>，各种信息免费发布，资源共享合作共赢！</div>
<div id=wwwwumingren3 style="display:none"><a href="https://www.wuming.ren">武鸣人三号内容</a>，各种信息免费发布，资源共享合作共赢！</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处