Js tab effect code enhanced version

<Style> body {font-family: Arial, ""; font-size: 9pt ;}td {font-size: 12px ;;}. mousehand {cursor: hand ;}. titletable {padding-left: 5px; background-color: # E9E9E9;} table. tabBarLevel1 {} table. tabBarLevel1 td {border: 1px solid # CCCCCC; height: 20px; background-color: # E1E1E1;} table. tabBarLevel1 td. selected {border-bottom-width: 0px; background-color: # ffffff;} table. tabBarLevel1 td. black {border-left-width: 0px; border-top-width: 0px; border-right-width: 0px; background-color: # FFFFFF;} table. content {border-left: 1px solid # CCCCCC; border-right: 1px solid # CCCCCC; border-bottom: 1px solid # cccccccc ;} </style> <table width = "600" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0" class = "TabBarLevel1" id = "TabPage1"> <tr align = "center"> <td width = "130 ""id =" imageTab1 "valign =" middle "class =" mousehand "onclick =" javascript: switchTab ('tabpage1 ', 'imagetab1', 'heartbleed, 'image '); "> popular images </td> <td width =" 7 "class =" Black "> </td> <td width =" 80 "id =" imageTab2 "valign =" middle "class =" mousehand "onclick =" javascript: switchTab ('tabpage1 ', 'imagetab2', 'virtual web', 'image '); "> bohemian </td> <td width =" 7 "class =" Black "> </td> <td width =" 80 "id =" imageTab3 "valign =" middle "class =" Selected mousehand "onclick =" javascript: switchTab ('tabpage1 ', 'imagetab3', 'unique visitor, 'image '); "> Red Hacker </td> <td width =" 7 "class =" Black "> </td> <td width =" "align =" right "class =" Black "> script house </td> </tr> </table> <table width =" 100% "border =" 0 "cellpadding =" 0 "cellspacing =" 0 "class =" content "> <tr> <td height =" 110 "> loading... </td> </tr> </table>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The effect of content control added based on it
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function $ (objName)
{

If (document. getElementById)
{
Return document. getElementById (objName );
}
Else if (document. layers)
{
Return eval ("document. layers ['" + objName + "']");
}
Else
{
Return eval ('document. all. '+ objName );
}
}
Function switchTab (tabpage, tabid, action, type ){
Var oItem = $ (tabpage );
For (var I = 1; I <6; I ++ ){
Var x = $ (type + 'tab '+ I );
// Alert (x );
X. className = "mousehand ";
// Var y = x. getElementsByTagName ('A ');
// Y [0]. style. color = "#333333 ";
}
$ (Tabid). className = "Selected ";
// Gethotimagelist (type + '_' + action );
Closeall (action );
$ (Action). style. display = "block ";
}
Function closeall (action ){
For (var ii = 1; ii <5; ii ++ ){
Var noclose;
Noclose = "div" + ii;
If (noclose! = Action ){
$ (Noclose). style. display = "none ";
}
}
}
</Script>