The effect chart is as follows:
View Demo Source Download
HTML code
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}