JavaScript encapsulates a tab effect source sharing _javascript Tips

The effect chart is as follows:

View Demo Source Download

HTML code

<! DOCTYPE html>
 
 

JS Code

function TabPanel (param) {var defaultindex=param["default"]| |,//settings displayed page panelobj=param["Panel"],//set tab container defalutclass=param["Defalutstyle"]| | "",/Set the Normal style of the tab item hoverclass=param["Hoverstyle"]| | " Hover ",//Set mouse to Move to tab menu item style Currentindex=defaultindex, menus=_$ (panelobj). getElementsByTagName (" ul ") [].
 getElementsByTagName ("Li"), contents=_$ (panelobj). getElementsByTagName ("ul") [].getelementsbytagname ("Li"),
 Menunumber=menus.length, hidden= "hidden";
 for (Var i=;i<menunumber;i++) {_setclass (contents[],hoverclass);
 _setclass (Contents[i],hidden);
 _setclass (Menus[i],defalutclass);
 (function (i) {menus[i].onmouseover=function () {var old=menus[currentindex];
 _setclass (Old,defalutclass);
 _setclass (Contents[currentindex],hidden);
 var cur=menus[i];
 _setclass (Cur,hoverclass);
 Currentindex=i;
 _setclass (Contents[i], "");
 };
 }) (i);
 } _setclass (Menus[currentindex],hoverclass);
 _setclass (Contents[currentindex], "");
 Convenience functions function _setclass (obj,classname) {obj.classname=classname}function _$ (OID) {return typeof (oid) = = "string"? document.getElementById (OID): OID}}

 

CSS Code

#tab {border:px solid #ccc;}
#tab. tab-bd{border-top:none;margin:auto;padding:px;text-align:left;height:px;position:relative}
. tab-nav{ Margin:auto;padding:;background: #eee; height:px;}
. Tab-nav Li{display:inline;list-style:none outside None;width:px;height:px;float:left;line-height:px;text-align: Center}
. Tab-nav li a{color:#;d isplay:inline-block}
tab-nav li A:hover,.tab-nav li.hover; Background: #fff; color:#;d Isplay:block; }
. Hidden{display:none}