How to Use Div + CSS to build embedded pages and follow button changes

How to Use Div + CSS to build embedded pages and follow button changes

Effect illustration:

CSS code:

. Partl {
Background: URL () # ffd77b repeat-y; overflow: hidden;
}
. Tabads {
Overflow: hidden; width: 800px;
}
. Tabads ul {
Clear: Both; overflow: hidden; width: 800px; Height: 24px;
}
. Tabads Li {
Padding-Right: 0px; padding-left: 0px; Background: URL (images/center1.jpg) # e4e4e4 no-repeat right 50%; float: Left padding-bottom: 0px; width: 60px; cursor: pointer; color: #333; padding-top: 6px; Height: 18px; text-align: Center
}
. Tabads. tasadson {
Font-weight: bold; Background: URL (images/center.jpg) # ffe4a6 no-repeat right 50%; cursor: pointer; color: #333; text-align: Center
}
. Tabadscon {
Padding-Right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px
}
. Tabadscon Li {
Line-Height: 20px; text-align: Left; overflow: hidden;
}

HTML code:

<Table width = 800 align = "center" cellspacing = 0>
<Tbody>
<Tr>
<TD>
<Script language = JavaScript type = text/JavaScript>
Function show_tabadsmenu (tabadid_num, tabadnum ){
For (VAR I = 0; I <5; I ++) {document. getelementbyid ("tabadcontent _" + tabadid_num + I). style. Display = "NONE ";}
For (VAR I = 0; I <5; I ++) {document. getelementbyid ("tabadmenu _" + tabadid_num + I). classname = "";}
Document. getelementbyid ("tabadmenu _" + tabadid_num + tabadnum). classname = "tasadson ";
Document. getelementbyid ("tabadcontent _" + tabadid_num + tabadnum). style. Display = "Block ";
}
</SCRIPT>
<Div class = tabads>
<Ul>
<Li class = tasadson id = tabadmenu_10
Onmouseover = "setTimeout ('show _ tabadsmenu (200) ',);"> function 1 </LI>
<Li id = tabadmenu_11
Onmouseover = "setTimeout ('show _ tabadsmenu (1, 1) ', 200);"> function 2 </LI>
<Li id = tabadmenu_12
Onmouseover = "setTimeout ('show _ tabadsmenu (1, 2) ', 200);"> function 3 </LI>
<Li id = tabadmenu_13
Onmouseover = "setTimeout ('show _ tabadsmenu (1, 3) ', 200);"> function 4 </LI>
<Li id = tabadmenu_14
Onmouseover = "setTimeout ('show _ tabadsmenu (200) ',);"> function 5 </LI>
</Ul>
</Div>
<Div class = tabadscon>
<Ul id = tabadcontent_10>
<Li>
<IFRAME src = "1.html" width = "800" Height = "400" style = "frameborder: 0" frameborder = auto scrolling = auto> </iframe>
</LI>
</Ul>
<Ul id = tabadcontent_11 style = "display: none">
<Li>
<IFRAME src = "5.html" width = "800" Height = "400" style = "frameborder: 0" frameborder = auto scrolling = auto> </iframe>
</LI>
</Ul>
<Ul id = tabadcontent_12 style = "display: none">
<Li>
<IFRAME src = "2.html" width = "800" Height = "400" style = "frameborder: 0" frameborder = auto scrolling = auto> </iframe>
</LI>
</Ul>
<Ul id = tabadcontent_13 style = "display: none">
<Li>
<IFRAME src = "3.html" width = "800" Height = "400" style = "frameborder: 0" frameborder = auto scrolling = auto> </iframe>
</LI>
</Ul>
<Ul id = tabadcontent_14 style = "display: none">
<Li>
<IFRAME src = "1.html" width = "800" Height = "400" style = "frameborder: 0" frameborder = auto scrolling = auto> </iframe>
</LI>
</Ul>
</Div>
</Div>
</TD>
</Tr>
</Tbody>
</Table>