用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 href="http://www.wait-till-i.com" 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 id="warp">     <div 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)实现--简短版