A good Web page tab _ navigation menu with JavaScript

Source: Internet
Author: User
Tags prev
This tab effect, I have seen a good tab effect, not the best, but also very good
<ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>javascript tab (tab) browsing control referral: domtab-javascript, Domtab, tab, tab, </title> <s Tyle type= "Text/css" > <!--body {margin:0; padding:10px 5px; font-size:12px; Font-family:verdana,arial,sans-serif, "Song Body"; } #warp {width:600px; margin:0 Auto; }/* Tab style begins/* Ul.domtabs {list-style:none; Font-size:0.9em; border-bottom:1px solid #D55E12; margin:0 0 20px 0; padding:0 30px 2px 0; Text-align:right; } ul.domtabs li {display:inline; margin:0; } ul.domtabs A:link, Ul.domtabs a:visited, Ul.domtabs a:active, ul.domtabs a:hover {text-decoration:none; padding:2px 5px 4px 5px; position:relative; bottom:1px; Color: #EA8544; Ul.domtabs li.active a:link, Ul.domtabs li.active a:visited, Ul.domtabs li.active a:active, Ul.domtabs li.active OVER { Background: #fff; padding:2px 10px 4px 10px; border:1px solid #D55E12; border-bottom:1px solid #fff; position:relative; bottom:1px; Color: #D55E12; Font-weight:bold; } ul.domtabs a:hover {text-decoration:underline; Color: #D55E12; } ul.domtabs li.active a:hover {text-decoration:none; }/* Before and after the jump * * Ul.prevnext {list-style-type:none; margin:0; padding: 5em 0; border-top:1px solid #D55E12; } Ul.prevnext li a {display:block; Width:6em; Color: #FFF; Background-color: #D55E12; PADDING:2PX 0; Text-align:center; Text-decoration:none; FONT:12PX bold "Verdana"; } ul.prevnext li a:hover {color: #FFF; Background-color: #EA8544; } ul.prevnext. prev {Float:left} Ul.prevnext. Next {float:right;} h2.title {color: #D55E12;} --> </style> <script>/* domtab Version 3.1415927 Updated March the The "I 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 AC Tiveclass: ' Active ',//class of Current link contentelements: ' div ',//elements to loop through backtolinks:/#to p/,//pattern to check "back to top" links Printid: ' Domtabprintview ',//ID of the ' Print all link Showalllinkte XT: "Show All Content",//text for the "Print all link" prevnextindicator: ' Doprevnext ',//class to trigger prev and NE XT links Prevnextclass: ' Prevnext ',//class of the Prev and next list Prevlabel: ' Previous ',//HTML content of T He prev link nextlabel: ' Next ',//HTML content to 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). Get Elementsbytagname (' 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.s Howalllinktext)); 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.getElementBy Id (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 is so very much easier with InnerHTML, darn you standards Feti Sh! 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.parentN Ode.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=!dom Tab.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= "Dom Tabs "> <li>PHP/MySQL</li> <li> (X) html/css</li> <li&gt ; javascript</li> <li>Ajax</li> </ul> <p class= "title" >homr.cn -DIV+CSS Small Segment Essence Code </p> <!--TAB 1--> <div> <p>PHP</p> <p>php ("Php:hypertext preprocessor", the acronym for Hypertext Preprocessor) is a widely used, open source, multipurpose scripting language that can be embedded in HTML, especially for Web development. </p> <p>MySQL</p> <p>mysql is the most popular open source SQL database management system, which is developed, published and supported by MySQL AB. MySQL AB is a business company founded by more than one MySQL developer. It is a second-generation open source company that combines open source value orientations, methodologies, and successful business models. </p> <p>back to menu</p> </div> <!--TAB 2--> <d Iv> <p>(X) html</p> <p>html language is the tool for us to build Web pages, from the advent of its development to the present, the standardization of continuous improvement, more and more powerful. However, there are still defects and deficiencies, people continue to improve it, so that it more easily controlled and flexible to adapt to the rapid application of the network needs. At the end of 2000, the International World Wide Web Consortium announced the release of the XHTML 1.0 version. </p> <p>xhtml 1.0 is a new language that is optimized and improved on the basis of HTML 4.0, and is designed to be based on XML applications. XHTML is an enhanced HTML, and its scalability and flexibility will accommodate more requirements for future network applications. </p> <p>CSS</p> &LT;P&GT;CSS is the abbreviation for cascading Style Sheet. "Cascading style forms." is a markup language for (enhanced) control of page styles and allows the separation of style information from Web page content. </p> <p>back to menu</p> </div> <!--TAB 3--> <d Iv> <p>Javascript</p> <p>javascript is a new descriptive language that can be embedded in HTML files. JavaScript can be used to respond to user demand events (such as form input) without using any network to transmit data back and forth, so when a user input a data, it does not have to pass to the server to process, and then pass back the process, and directly by the client ( Client) are processed by the application. </p> <p>back to menu</p> </div> <!--TAB 4--> <d Iv> <p>ajax</p> <p>ajax (Asynchronous JavaScript and XML, asynchronous JavaScript, and XML technology) is a new word, but the connotation is two JavaScript features that have existed for some time. These two functions have been neglected in the past, in Gmail, Google suggest and Google Maps after the emergence of the fame world know. </p> <p> These two JavaScript features are: <ul> <li> at No reread page Case Request for Server (request) </li> <li> parsing, using XML file </li> </ul> </p> <p>back to menu</p> </div> </div> </div> < /body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.