用javascript实现的不错的一款网页选项卡

这款选项卡效果，是我见过的一个不错的选项卡效果，不是最好，也是很好的

<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: http://www.wait-till-i.com 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> <ul class="domtabs"> <li>PHP/MySQL</li> <li>（X）HTML/CSS</li> <li>Javascript</li> <li>Ajax</li> </ul> <h2 class="title">Homr.cn - DIV+CSS小段精华代码</h2> <h2>PHP</h2> PHP（"PHP: Hypertext Preprocessor"，超文本预处理器的字母缩写）是一种被广泛应用的开放源代码的多用途脚本语言，它可嵌入到 HTML中，尤其适合 web 开发。 <br/> <h2>MySQL</h2> MySQL是最流行的开放源码SQL数据库管理系统，它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司，结合了开放源码价值取向、方法和成功的商业模型。<br/> back to menu<br/><h2>（X）HTML</h2> HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000年底，国际W3C（World Wide Web Consortium）组织公布发行了XHTML 1.0版本。<br/> XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。<br/> <h2>CSS</h2> CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。<br/> back to menu<br/><h2>Javascript</h2> JavaScript 是一种新的描述语言，此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 （如： form 的输入） 而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 （server）处理，再传回来的过程，而直接可以被客户端 （client） 的应用程式所处理。<br/> back to menu<br/><h2>Ajax</h2> AJAX （Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术） 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及Google Maps 出现后才一举成名天下知。<br/> 这两个 JavaScript 功能 是： <ul> <li>在不重新读取页面的情况下对伺服器送出要求（request）</li> <li>解析、使用 XML 文件</li> </ul> <br/> back to menu<br/></body> </html>

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