js+css制作选项卡切换显示特效，有点击方式切换和鼠标感应经过切换效果，这个选项卡特效兼容当前主流浏览器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<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>两款实用css选项卡特效分享_武鸣人</title>
<style type="text/css">
<!--
body{ padding:0;font:12px "宋体"; }
/*选项卡1*/
#lib_wuming_1{width:500px;margin:0px;padding:0px;margin-bottom:15px;}
/*选项卡2*/
#lib_wuming_2{width:576px;margin:0px;padding:0px;margin-bottom:15px; }
/*菜单class*/
.lib_border_wuming{border:1px solid #95C9E1;}
.lib_menu_wumingren {height:28px;line-height:28px;position:relative;}
.lib_menu_wumingren ul{margin:0px;padding:0px;list-style:none; position:absolute; top:3px; left:0; margin-left:10px; height:25px;text-align:center;}
.lib_menu_wumingren li{float:left;display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-right:2px;height:25px;line-height:25px; background-color:#E4F2FD}
.lib_menu_wumingren li.hover{padding:0px;background:#fff;width:116px;border-left:1px solid #95C9E1;border-top:1px solid #95C9E1;border-right:1px solid #95C9E1;
color:#739242;height:25px;line-height:25px;}
.lib_Contentbox_wuming{clear:both;margin-top:0px; border-top:none;height:181px; text-align:center;padding-top:8px;}
-->
</style>
<script>
<!--
function settab_wumingren(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var wuming=document.getElementById("wuming_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
wuming.style.display=i==cursel?"block":"none";
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//-->
</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 id="lib_wuming_1">
<div class="lib_menu_wumingren lib_border_wuming">
<ul>
<li id="wuming_11" onclick="settab_wumingren('wuming_1',1,4)" class="hover">武鸣人一号</li>
<li id="wuming_12" onclick="settab_wumingren('wuming_1',2,4)">武鸣人二号</li>
<li id="wuming_13" onclick="settab_wumingren('wuming_1',3,4)">武鸣人三号</li>
<li id="wuming_14" onclick="settab_wumingren('wuming_1',4,4)">武鸣人四号</li>
</ul>
</div>
<div class="lib_Contentbox_wuming lib_border_wuming">
<div id="wuming_wuming_1_1">一号选项卡内容，点击方式切换，实用js选项卡。<br /><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！</div>
<div id="wuming_wuming_1_2" style="display:none">二号选项卡内容，点击方式切换，实用js选项卡。<br /><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！</div>
<div id="wuming_wuming_1_3" style="display:none">三号选项卡内容，点击方式切换，实用js选项卡。<br /><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！</div>
<div id="wuming_wuming_1_4" style="display:none">四号选项卡内容，点击方式切换，实用js选项卡。<br /><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！</div>
</div>
</div>
<div id="lib_wuming_2">
<div class="lib_menu_wumingren lib_border_wuming">
<ul>
<li id="wuming_21" onmouseover="settab_wumingren('wuming_2',1,4)">武鸣人一号</li>
<li id="wuming_22" onmouseover="settab_wumingren('wuming_2',2,4)"class="hover">武鸣人二号</li>
<li id="wuming_23" onmouseover="settab_wumingren('wuming_2',3,4)">武鸣人三号</li>
<li id="wuming_24" onmouseover="settab_wumingren('wuming_2',4,4)">武鸣人四号</li>
</ul>
</div>
<div class="lib_Contentbox_wuming lib_border_wuming">
<div id="wuming_wuming_2_1">一号选项卡内容，鼠标经过切换，实用js选项卡。<br /><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！</div>
<div id="wuming_wuming_2_2" style="display:none">二号选项卡内容，鼠标经过切换，实用js选项卡。<br /><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！</div>
<div id="wuming_wuming_2_3" style="display:none">三号选项卡内容，鼠标经过切换，实用js选项卡。<br /><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！</div>
<div id="wuming_wuming_2_4" style="display:none">四号选项卡内容，鼠标经过切换，实用js选项卡。<br /><a href="https://www.wuming.ren" target="_blank">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！</div>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处