Home>

Come directly to the truth:

[Html code]

<div>
<!-Tag title->
  <ul>
    <li><a href="#">tab1</a></li>
    <li><a href="#">tab2</a></li>
    <li><a href="#">tab3</a>
    <div></div>
  </ul>
<!-Secondary menu->
  <div>
    <div>
      This is the tab switching effect area 1
     </div>
    <div>
      This is the tab switching effect area 2
     </div>
    <div>
      This is the tab switching effect area 3
    </div>
</div>
</div>

[Js]

/**
 * tabs
 * @author Oak Lodge
 * /
var tabs=function () {
  function tag (name, elem) {
    return (elem || document) .getelementsbytagname (name);
  }
  //Get the element with the corresponding id
  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}

Calling method:

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

This example simply implements the effect of click switching.There are many more features that can be added,Let's practice it together.

  • Previous Correct usage of previousSibling and nextSibling in javascript
  • Next jdbc operation mysql database instance