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制作简洁竖型tab选项卡切换特效_武鸣人</title>
<style type="text/css">
<!--
body{ padding:0;font:12px "宋体"; }
/*选项卡1*/
#lib_wwwwumingren{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;}
/*菜单class*/
.lib_wumingren{border:1px solid #95C9E1;}
.lib_menubox_wumingren {line-height:28px;position:relative; float:left; width:130px; height:240px;border-right:1px solid #95C9E1;}
.lib_menubox_wumingren ul{margin:0px;padding:0px;list-style:none; position:absolute; top:15px; left:5px; margin-left:10px; height:25px;text-align:center;}
.lib_menubox_wumingren li{display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-bottom:5px;height:25px;line-height:25px; background-color:#E4F2FD}
.lib_menubox_wumingren li.hover{padding:0px;background:#fff;width:116px;border:1px solid #95C9E1; border-right:0;
color:#739242;height:25px;line-height:25px;}
.lib_contentbox_wumingren{margin-top:0px; border-top:none;padding:20px; border-left:0; margin-left:130px;}
-->
</style>
<script>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var wuming=document.getElementById("wwwwumingren_"+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_wwwwumingren" class="lib_wumingren">
<div class="lib_menubox_wumingren">
<ul>
<li id="wuming1" onclick="setTab('wuming',1,5)" class="hover">武鸣人一号</li>
<li id="wuming2" onclick="setTab('wuming',2,5)">武鸣人二号</li>
<li id="wuming3" onclick="setTab('wuming',3,5)">武鸣人三号</li>
<li id="wuming4" onclick="setTab('wuming',4,5)">武鸣人四号</li>
<li id="wuming5" onclick="setTab('wuming',5,5)">武鸣人五号</li>
</ul>
</div>
<div class="lib_contentbox_wumingren">
<div id="wwwwumingren_wuming_1" ><a href="https://www.wuming.ren">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！<br />这里是一号选项卡内容</div>
<div id="wwwwumingren_wuming_2" style="display:none"><a href="https://www.wuming.ren">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！<br />这里是二号选项卡内容</div>
<div id="wwwwumingren_wuming_3" style="display:none"><a href="https://www.wuming.ren">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！<br />这里是三号选项卡内容</div>
<div id="wwwwumingren_wuming_4" style="display:none"><a href="https://www.wuming.ren">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！<br />这里是四号选项卡内容</div>
<div id="wwwwumingren_wuming_5" style="display:none"><a href="https://www.wuming.ren">武鸣人网</a>，各种信息免费发布，资源共享合作共赢！<br />这里是五号选项卡内容</div>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处