js+css制作简洁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">
<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">
body{
margin:5px;
padding:0px;
}
.tabs_wuming_ren{
width:auto;
height:auto;
border:0px solid red;
}
.selectTab,.unselectTab{
border:1px solid #BDDFF9;
border-bottom-width:0;
width:150px;
height:23px;
line-height:23px;
vertical-align:middle;
text-align:center;
background-color:#37709B;
margin:0;
margin-right:18px;
font-weight:bold;
font-size:14px;
color:#FFF;
cursor:pointer;
float:left;
}
.unselectTab{
color:#37709B;
background-color:white;
}
.selectContent{
border-top:5px #37709b solid;
padding-top:8px;
clear:both;
}
.unselectContent{
display:none;
}
</style>
<script language="javascript">
window.onload=resetTab;
function getTabTitle(tab) {
var childNodesList=tab.childNodes;
var titleNodes=new Array();
var j=0;
var i;
for (i=0;i<childNodesList.length;i++) {
if(childNodesList[i].nodeName=="H1") {
titleNodes[j]=childNodesList[i];
j++;
}
}
return titleNodes;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function getTabContent(tab) {
var childNodesList=tab.childNodes;
var tabContent=new Array();
var j=0;
var i;
for (i=0;i<childNodesList.length;i++) {
if(childNodesList[i].nodeName=="DIV") {
tabContent[j]=childNodesList[i];
j++;
}
}
return tabContent;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function resetTab() {
var allDiv=document.getElementsByTagName("div");
var tab=new Array();
var j=0;
var i;
for (i=0;i<allDiv.length;i++) {
if(allDiv[i].className=="tabs_wuming_ren") {
tab[j]=allDiv[i];
j++;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var tabTitle,tabContent;
for(i=0;i<tab.length;i++) {
tabTitle=getTabTitle(tab[i]);
tabTitle[0].className="selectTab";
tabContent=getTabContent(tab[i]);
tabContent[0].className="selectContent";
for (j=1;j<tabTitle.length;j++) {
tabTitle[j].className="unselectTab";
tabContent[j].className="unselectContent";
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function changtab_wwwwumingren(tab) {
var tabTitle,tabContent,i;
if(tab.className!="selectTab") {
tabTitle=getTabTitle(tab.parentNode);
tabContent=getTabContent(tab.parentNode);
for(i=0;i<tabTitle.length;i++) {
if(tabTitle[i].className=="selectTab") {
tabTitle[i].className="unselectTab";
}
if(tabContent[i].className=="selectContent") {
tabContent[i].className="unselectContent";
}
}
tab.className="selectTab";
for(i=0;i<tabTitle.length;i++) {
if(tabTitle[i].className=="selectTab") {
tabContent[i].className="selectContent";
break;
}
}
}
}//武鸣人网站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 class="tabs_wuming_ren">
<h1 onmouseover="changtab_wwwwumingren(this)">武鸣人一号选项卡</h1>
<h1 onmouseover="changtab_wwwwumingren(this)">武鸣人二号选项卡</h1>
<h1 onmouseover="changtab_wwwwumingren(this)">武鸣人三号选项卡</h1>
<h1 onmouseover="changtab_wwwwumingren(this)">武鸣人四号选项卡</h1>
<div>武鸣人提示您：这是一号内容111。<a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</div>
<div>武鸣人提示您：这是二号内容222。<a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</div>
<div>武鸣人提示您：这是三号内容333。<a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</div>
<div>武鸣人提示您：这是四号内容444。<a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</div>
</div>
</body>
</html>