简捷雅观的纯CSS网页Tab滑动门菜单二例

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

导读：烈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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网