用javascript實現的不錯的一款網頁選項卡

2019-11-21 01:53:22

字體：大中小

來源：轉載

供稿：網友

這款選項卡效果，是我見過的一個不錯的選項卡效果，不是最好，也是很好的

<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Javascript 標簽頁（TAB）瀏覽控件推介之：DOMTab - javascript, DOMTab, TAB, 標簽頁, </title> <style type="text/css">  </style> <script> /*     DOMtab Version 3.1415927     Updated March the First 2006     written by Christian Heilmann     check blog for updates: <a  target="_blank">http://www.wait-till-i.com</a>         free to use, not free to resell */ domtab={     tabClass:'domtab', // class to trigger tabbing     listClass:'domtabs', // class of the menus     activeClass:'active', // class of current link     contentElements:'div', // elements to loop through     backToLinks:/#top/, // pattern to check "back to top" links     printID:'domtabprintview', // id of the print all link     showAllLinkText:'show all content', // text for the print all link     prevNextIndicator:'doprevnext', // class to trigger prev and next links     prevNextClass:'prevnext', // class of the prev and next list     prevLabel:'previous', // HTML content of the prev link     nextLabel:'next', // HTML content of the next link     prevClass:'prev', // class for the prev link     nextClass:'next', // class for the next link     init:function(){         var temp;         if(!document.getElementById || !document.createTextNode){return;}         var tempelm=document.getElementsByTagName('div');                 for(var i=0;i<tempelm.length;i++){             if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;}             domtab.initTabMenu(tempelm[i]);             domtab.removeBackLinks(tempelm[i]);             if(domtab.cssjs('check',tempelm[i],domtab.prevNextIndicator)){                 domtab.addPrevNext(tempelm[i]);             }             domtab.checkURL();         }         if(document.getElementById(domtab.printID)             && !document.getElementById(domtab.printID).getElementsByTagName('a')[0]){             var newlink=document.createElement('a');             newlink.setAttribute('href','#');             domtab.addEvent(newlink,'click',domtab.showAll,false);             newlink.onclick=function(){return false;} // safari hack             newlink.appendChild(document.createTextNode(domtab.showAllLinkText));             document.getElementById(domtab.printID).appendChild(newlink);         }     },     checkURL:function(){         var id;         var loc=window.location.toString();         loc=/#/.test(loc)?loc.match(/#(/w.+)/)[1]:'';         if(loc==''){return;}         var elm=document.getElementById(loc);         if(!elm){return;}         var parentMenu=elm.parentNode.parentNode.parentNode;         parentMenu.currentSection=loc;         parentMenu.getElementsByTagName(domtab.contentElements)[0].style.display='none';         domtab.cssjs('remove',parentMenu.getElementsByTagName('a')[0].parentNode,domtab.activeClass);         var links=parentMenu.getElementsByTagName('a');         for(i=0;i<links.length;i++){             if(!links[i].getAttribute('href')){continue;}             if(!/#/.test(links[i].getAttribute('href').toString())){continue;}             id=links[i].href.match(/#(/w.+)/)[1];             if(id==loc){                 var cur=links[i].parentNode.parentNode;                 domtab.cssjs('add',links[i].parentNode,domtab.activeClass);                 break;             }         }         domtab.changeTab(elm,1);         elm.focus();         cur.currentLink=links[i];         cur.currentSection=loc;     },     showAll:function(e){         document.getElementById(domtab.printID).parentNode.removeChild(document.getElementById(domtab.printID));         var tempelm=document.getElementsByTagName('div');                 for(var i=0;i<tempelm.length;i++){             if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;}             var sec=tempelm[i].getElementsByTagName(domtab.contentElements);             for(var j=0;j<sec.length;j++){                 sec[j].style.display='block';             }         }         var tempelm=document.getElementsByTagName('ul');                 for(i=0;i<tempelm.length;i++){             if(!domtab.cssjs('check',tempelm[i],domtab.prevNextClass)){continue;}             tempelm[i].parentNode.removeChild(tempelm[i]);             i--;         }         domtab.cancelClick(e);     },     addPrevNext:function(menu){         var temp;         var sections=menu.getElementsByTagName(domtab.contentElements);         for(var i=0;i<sections.length;i++){             temp=domtab.createPrevNext();             if(i==0){                 temp.removeChild(temp.getElementsByTagName('li')[0]);             }             if(i==sections.length-1){                 temp.removeChild(temp.getElementsByTagName('li')[1]);             }             temp.i=i; // h4xx0r!             temp.menu=menu;             sections[i].appendChild(temp);         }     },     removeBackLinks:function(menu){         var links=menu.getElementsByTagName('a');         for(var i=0;i<links.length;i++){             if(!domtab.backToLinks.test(links[i].href)){continue;}             links[i].parentNode.removeChild(links[i]);             i--;         }     },     initTabMenu:function(menu){         var id;         var lists=menu.getElementsByTagName('ul');         for(var i=0;i<lists.length;i++){             if(domtab.cssjs('check',lists[i],domtab.listClass)){                 var thismenu=lists[i];                 break;             }         }         if(!thismenu){return;}         thismenu.currentSection='';         thismenu.currentLink='';         var links=thismenu.getElementsByTagName('a');         for(i=0;i<links.length;i++){             if(!/#/.test(links[i].getAttribute('href').toString())){continue;}             id=links[i].href.match(/#(/w.+)/)[1];             if(document.getElementById(id)){                 domtab.addEvent(links[i],'click',domtab.showTab,false);                 links[i].onclick=function(){return false;} // safari hack                 domtab.changeTab(document.getElementById(id),0);             }         }         id=links[0].href.match(/#(/w.+)/)[1];         if(document.getElementById(id)){             domtab.changeTab(document.getElementById(id),1);             thismenu.currentSection=id;             thismenu.currentLink=links[0];             domtab.cssjs('add',links[0].parentNode,domtab.activeClass);         }     },     createPrevNext:function(){         // this would be so much easier with innerHTML, darn you standards fetish!         var temp=document.createElement('ul');         temp.className=domtab.prevNextClass;         temp.appendChild(document.createElement('li'));         temp.getElementsByTagName('li')[0].appendChild(document.createElement('a'));         temp.getElementsByTagName('a')[0].setAttribute('href','#');         temp.getElementsByTagName('a')[0].innerHTML=domtab.prevLabel;         temp.getElementsByTagName('li')[0].className=domtab.prevClass;         temp.appendChild(document.createElement('li'));         temp.getElementsByTagName('li')[1].appendChild(document.createElement('a'));         temp.getElementsByTagName('a')[1].setAttribute('href','#');         temp.getElementsByTagName('a')[1].innerHTML=domtab.nextLabel;         temp.getElementsByTagName('li')[1].className=domtab.nextClass;         domtab.addEvent(temp.getElementsByTagName('a')[0],'click',domtab.navTabs,false);         domtab.addEvent(temp.getElementsByTagName('a')[1],'click',domtab.navTabs,false);         // safari fix         temp.getElementsByTagName('a')[0].onclick=function(){return false;}         temp.getElementsByTagName('a')[1].onclick=function(){return false;}         return temp;     },     navTabs:function(e){         var li=domtab.getTarget(e);         var menu=li.parentNode.parentNode.menu;         var count=li.parentNode.parentNode.i;         var section=menu.getElementsByTagName(domtab.contentElements);         var links=menu.getElementsByTagName('a');         var othercount=(li.parentNode.className==domtab.prevClass)?count-1:count+1;         section[count].style.display='none';         domtab.cssjs('remove',links[count].parentNode,domtab.activeClass);         section[othercount].style.display='block';         domtab.cssjs('add',links[othercount].parentNode,domtab.activeClass);         var parent=links[count].parentNode.parentNode;         parent.currentLink=links[othercount];         parent.currentSection=links[othercount].href.match(/#(/w.+)/)[1];         domtab.cancelClick(e);     },     changeTab:function(elm,state){         do{             elm=elm.parentNode;         } while(elm.nodeName.toLowerCase()!=domtab.contentElements)         elm.style.display=state==0?'none':'block';     },     showTab:function(e){         var o=domtab.getTarget(e);         if(o.parentNode.parentNode.currentSection!=''){             domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection),0);             domtab.cssjs('remove',o.parentNode.parentNode.currentLink.parentNode,domtab.activeClass);         }         var id=o.href.match(/#(/w.+)/)[1];         o.parentNode.parentNode.currentSection=id;         o.parentNode.parentNode.currentLink=o;         domtab.cssjs('add',o.parentNode,domtab.activeClass);         domtab.changeTab(document.getElementById(id),1);         document.getElementById(id).focus();         domtab.cancelClick(e);     }, /* helper methods */     getTarget:function(e){         var target = window.event ? window.event.srcElement : e ? e.target : null;         if (!target){return false;}         if (target.nodeName.toLowerCase() != 'a'){target = target.parentNode;}         return target;     },     cancelClick:function(e){         if (window.event){             window.event.cancelBubble = true;             window.event.returnValue = false;             return;         }         if (e){             e.stopPropagation();             e.preventDefault();         }     },     addEvent: function(elm, evType, fn, useCapture){         if (elm.addEventListener)          {             elm.addEventListener(evType, fn, useCapture);             return true;         } else if (elm.attachEvent) {             var r = elm.attachEvent('on' + evType, fn);             return r;         } else {             elm['on' + evType] = fn;         }     },     cssjs:function(a,o,c1,c2){         switch (a){             case 'swap':                 o.className=!domtab.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);             break;             case 'add':                 if(!domtab.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}             break;             case 'remove':                 var rep=o.className.match(' '+c1)?' '+c1:c1;                 o.className=o.className.replace(rep,'');             break;             case 'check':                 var found=false;                 var temparray=o.className.split(' ');                 for(var i=0;i<temparray.length;i++){                     if(temparray[i]==c1){found=true;}                 }                 return found;             break;         }     } } domtab.addEvent(window, 'load', domtab.init, false); </script> <body> <div   class="iwvjtn8m0"   id="warp">     <div   id="iwvjtn8m0"   class="domtab doprevnext">         <ul class="domtabs">             <li><a href="#tab1">PHP/MySQL</a></li>             <li><a href="#tab2">(X)HTML/CSS</a></li>             <li><a href="#tab3">Javascript</a></li>             <li><a href="#tab4">Ajax</a></li>         </ul>         <h2 class="title">Homr.cn - DIV+CSS小段精華代碼</h2>                  <div>             <h2><a name="tab1" id="tab1">PHP</a></h2>             <p>PHP（"PHP: Hypertext Preprocessor"，超文本預處理器的字母縮寫）是一種被廣泛應用的開放源代碼的多用途腳本語言，它可嵌入到 HTML中，尤其適合 web 開發。 </p>             <h2><a name="mysql">MySQL</a></h2>             <p>MySQL是最流行的開放源碼SQL數據庫管理系統，它是由MySQL AB公司開發、發布并支持的。MySQL AB是由多名MySQL開發人創辦的一家商業公司。它是一家第二代開放源碼公司，結合了開放源碼價值取向、方法和成功的商業模型。</p>             <p><a href="#top">back to menu</a></p>         </div>                  <div>             <h2><a name="tab2" id="tab2">(X)HTML</a></h2>             <p>HTML語言是我們建立網頁的工具，從它出現發展到現在，規范不斷完善，功能越來越強。但是依然有缺陷和不足，人們仍在不斷的改進它，使它更加便于控制和有彈性，以適應網絡上日新月異的應用需求。2000年底，國際W3C(World Wide Web Consortium)組織公布發行了XHTML 1.0版本。</p>             <p>XHTML 1.0是一種在HTML 4.0基礎上優化和改進的的新語言，目的是基于XML應用。XHTML是一種增強了的HTML,它的可擴展性和靈活性將適應未來網絡應用更多的需求。</p>             <h2><a name="css">CSS</a></h2>             <p>CSS 是 Cascading Style Sheet 的縮寫。譯作「層疊樣式表單」。是用于(增強)控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。</p>             <p><a href="#top">back to menu</a></p>         </div>                  <div>             <h2><a name="tab3" id="tab3">Javascript</a></h2>             <p>JavaScript 是一種新的描述語言，此一語言可以被嵌入 HTML 的文件之中。透過 JavaScript 可以做到回應使用者的需求事件 (如： form 的輸入) 而不用任何的網路來回傳輸資料，所以當一位使用者輸入一項資料時，它不用經過傳給伺服端 (server)處理，再傳回來的過程，而直接可以被客戶端 (client) 的應用程式所處理。</p>             <p><a href="#top">back to menu</a></p>         </div>                  <div>             <h2><a name="tab4" id="tab4">Ajax</a></h2>             <p>AJAX (Asynchronous JavaScript and XML, 異步 JavaScript 及 XML 技術) 是個新詞，但內涵是兩個存在已有一段時間的 JavaScript 功能。這兩種功能以往一直被忽略，在 Gmail、Google suggest 及  Google Maps 出現后才一舉成名天下知。</p>             <p>這兩個 JavaScript 功能 是：                 <ul>                     <li>在不重新讀取頁面的情況下對伺服器送出要求（request）</li>                     <li>解析、使用 XML 文件</li>                 </ul>             </p>             <p><a href="#top">back to menu</a></p>         </div>     </div> </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript之文本框輸入四個數字自動加空格的腳本

下一篇：兼容ie和firefox的鼠標經過(onmouseover和onmouseout)實現--簡短版