简洁美观的纯CSS网页Tab滑动门菜单二例

发布时间：2018-08-16 18:59:12 所属栏目：创业来源：站长网

导读：烈68火85网(LieHuo75.Net)教08程简洁美观的纯CSS网页Tab滑动门菜单二例，同时布局在单个网页中，与选项卡其实是不一样的，滑动门在鼠标滑过的瞬间就激活函数，选项卡需要鼠标点击才激活，两者各有优势，这要看具体的适用场合了，编写方法就请参考代码。

　　烈68火85网(LieHuo75.Net)教08程简洁美观的纯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> <title>两个简洁美观的网页Tab选项卡菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{ margin:5px; padding:0px; } .tabs{ 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; } 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; } 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") { tab[j]=allDiv[i]; j++; } } 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"; } } } function changTab(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; } } } } </script> </head> <body> <div class="tabs"> <h1 onmouseover="changTab(this)"> 选项卡[1] </h1> <h1 onmousemove="changTab(this)"> 选项卡[2] </h1> <h1 onmouseover="changTab(this)"> 选项卡[3] </h1> <h1 onmousemove="changTab(this)"> 选项卡[4] </h1> <div>1经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。</div> <div>烈火下载提供各类编程源码、<b>Java</b>Script/CSS特效代码以及常用软件下载等。 </div> <div>3经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。</div> <div>烈火下载做有质量的学习型源码下载站。</div> </div> <br> <div class="tabs"> <h1 onmouseover="changTab(this)"> 选项卡[1] </h1> <h1 onmousemove="changTab(this)"> 选项卡[2] </h1> <h1 onmouseover="changTab(this)"> 选项卡[3] </h1> <h1 onmousemove="changTab(this)"> 选项卡[4] </h1> <div>1经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。</div> <div>2门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区</div> <div>3经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。</div> <div>4烈火下载提供各类编程源码、书籍教程以及常用软件下载等，做有质量的学习型源码下载站。</div> </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

躺赚，坐等收钱的项目	微盟与复星达成战略合
一切的成功，全归功于	2021，做个健身教练没