Implement Tab switching using JavaScript

This feature was implemented a long time ago. Now it has been released and has not been updated for a long time. There is still a lot of room for modifying this JS Code. Please come up first and try again later.

This is:

[HTML code]

<Div id = "menu"> <! -- Tag title --> <ul id = "nav"> <li> <a href = "#" class = "selected"> tab1 </a> </li> <li> <a href = "#" class = ""> tab2 </a> </li> <a href = "#" class = ""> tab3 </ a> </li> <div style = "clear: both "> </div> </ul> <! -- Level 2 menu --> <div id = "menu_con"> <div class = "tag" style = "display: block "> This is TAB switching effect area 1 </div> <div class =" tag "style =" display: none "> This Is The TAB switching effect area 2 </div> <div class =" tag "style =" display: none "> This is TAB switching effect Area 3 </div>

[Js]

/*** Tabs * @ author oak hut */var tabs = function () {function tag (name, ELEM) {return (ELEM | document ). getelementsbytagname (name);} // obtain the function ID (name) {return document. getelementbyid (name);} function first (ELEM) {ELEM = ELEM. firstchild; return ELEM & ELEM. nodetype = 1? ELEM: Next (ELEM);} function next (ELEM) {do {ELEM = ELEM. nextsibling;} while (ELEM & ELEM. nodetype! = 1) return ELEM;} return {set: function (elemid, Tabid) {var ELEM = tag ("Li", ID (elemid )); vaR tabs = tag ("Div", ID (Tabid); var listnum = ELEM. length; var tabnum = tabs. length; For (VAR I = 0; I <listnum; I ++) {ELEM [I]. onclick = (function (I) {return function () {for (var j = 0; j <tabnum; j ++) {if (I = J) {tabs [J]. style. display = "Block"; // alert (ELEM [J]. firstchild); ELEM [J]. firstchild. classname = "selected";} else {tabs [J]. style. display = "NONE"; ELEM [J]. firstchild. classname = "" ;}}}) (I) }}} (); window. onload = function () {tabs. set ("nav", "menu_con ");}

[CSS]

Body {background: # FFF;} a {color: #585858} # menu {width: 360px;}/* ------------------- nav style ---------------------- */# menu # nav {display: block; width: 100%; padding: 0; margin: 0; list-style: none; background: url (.. /images/bg.gif)} # menu # nav li {float: left; width: 120px;} # menu # nav li a {display: block; line-height: 27px; text-decoration: none; padding: 0 0 0 5px; text-align: center}/* ------------------- list title style ---------------------- */# menu_con {width: 358px; height: 135px; border: 1px solid # BF9660; border-top: none }. selected {background: url (.. /images/tag_bg.gif );}. clear {clear: both}

Call method:

Tabs. set ("nav", "menu_con ");

Click here to download the code

Only click switching is achieved.