Implementation Code of js tab Effect

Pre-implementation effect: (Click different tabs to display different panel content)

I. js functions used:
Copy codeThe Code is as follows:
<Script language = "javascript" type = "text/javascript">
// Transform the tab Function
// Principle, the outer div contains multiple inner div
Function tabPanelEx (trThis, urlImgNormal, urlImgPoint, tabs, tabid ){
Var tds = trThis. parentNode. children;
For (var I = 0; I <tds. length; I ++)
{
If (tds [I]. attributes ["ex"])
{
Tds [I]. style. backgroundImage = "url (" + urlImgNormal + ")";
}
}
TrThis. style. backgroundImage = "url (" + urlImgPoint + ")";
// Div control
Var vtabs = document. getElementById (tabs). children;
For (var j = 0; j <vtabs. length; j ++)
{
Vtabs [j]. style. display = "none ";
}
Document. getElementById (tabid). style. display = "block ";
}
</Script>

Ii. Page call code;
Code
Copy codeThe Code is as follows:
<Table width = "768" border = "0" cellspacing = "0" cellpadding = "0">
<! -- Button row at the top of the tab -->
<Tr valign = "bottom">
<Td height = "37" background = "../images/a_06.jpg">
<Table border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td width = "16" height = "32" valign = "bottom"> </td>
<Td ex = "true" width = "94" height = "32" align = "right" valign = "middle" background = ".. /images/an_01.jpg "style =" cursor: pointer"
OnClick = "tabPanelEx (this, '../images/an_02.jpg', '../images/an_01.jpg', 'newabs ', 'newstabab1')">
<Div style = "width: 72px; height: 28px; line-height: 28px; text-align: left; "class =" bllb14 "> full education </div> </td>
<Td width = "7" height = "32"> </td>
<Td ex = "true" width = "94" height = "32" align = "right" valign = "middle" background = ".. /images/an_02.jpg "style =" cursor: pointer"
OnClick = "tabPanelEx (this, '../images/an_02.jpg', '../images/an_01.jpg', 'newabs ', 'newstabab2')">
<Div style = "width: 72px; height: 28px; line-height: 28px; text-align: left; "class =" bllb14 "> Medical dynamics </div> </td>
</Tr>
</Table>
</Td>
</Tr>
<! -- Gap -->
<Tr>
<Td height = "5" align = "center"> </td>
</Tr>
<! -- Corresponding content -->
<Tr>
<Td align = "center">
<Div id = "newTabs">
<Div id = "newsTab1">
<Table width = "768" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td width = "384" height = "240" align = "left" valign = "top"> <p> full education </p>
</Td>
<Td width = "1" height = "240" background = "../images/a_07.jpg"> </td>
<Td width = "384" height = "240" align = "right" valign = "top"> full education </td>
</Tr>
</Table>
</Div>
<Div id = "newsTab2" style = "display: none">
<Table width = "768" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td width = "384" height = "240" align = "left" valign = "top"> Health Status </td>
<Td width = "1" height = "240" background = "../images/a_07.jpg"> </td>
<Td width = "384" height = "240" align = "right" valign = "top"> Health Status </td>
</Tr>
</Table>
</Div>
</Div>
</Td>
</Tr>
</Table>

Call description:
(1) The table is used, and the table structure is:
Code
Copy codeThe Code is as follows:
<Table width = "768" border = "0" cellspacing = "0" cellpadding = "0">
<! -- Button row at the top of the tab -->
<Tr valign = "bottom">
<Td first line menu tab>
<Table border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td calls onClick = "tabPanelEx (this ,'.. /images/an_02.jpg ','.. /images/an_01.jpg ', 'newabs', 'newstabab1') "display newsTab1>
<Div style = "width: 72px; height: 28px; line-height: 28px; text-align: left; "class =" bllb14 "> full education </div> </td>
<Td calls onClick = "tabPanelEx (this ,'.. /images/an_02.jpg ','.. /images/an_01.jpg ', 'newabs', 'newstabab2') "display newsTab2>
<Div style = "width: 72px; height: 28px; line-height: 28px; text-align: left; "class =" bllb14 "> Medical dynamics </div> </td>
</Table>
</Td>
</Tr>
<! -- Gap -->
<Tr>
<Td height = "5" align = "center"> </td>
</Tr>
<! -- Corresponding content -->
<Tr>
<Td align = "center">
<Div id = "newTabs">
<Div id = "newsTab1">
Full Education
</Div>
<Div id = "newsTab2" style = "display: none">
Health status
</Div>
</Div>
</Td>
</Tr>
</Table>

Full File Download