Sliding Door with CSS

Because Baidu does not support source code, please view another blog:

Http://www.blog.edu.cn/user4/dpxdqx/archives/2007/1867755.shtml

 

The following is the source code:

<Style type = text/CSS media = screen>
<! --
* {Font-size: 12px ;}
Ul {list-style-type: none; margin: 0px ;}
/* Standard box model */
. TTL {Height: 18px ;}
. CTT {Height: auto; padding: 6px; clear: both}
. W936 {width: 100%; margin: 2px 0; clear: Both; Border: 1px solid skyblue}

/* Tab switching effect */
. Tb _ {background-color: # e6f2ff; Background-image: URL ('HTTP: // www.dc18.com/images/barbg_tab.gif'); background-repeat: Repeat-X ;}
. Tb _ ul {Height: 24px ;}
. Tb _ Li {float: Left; Height: 24px; padding-top: 6px; width: 94px; cursor: pointer ;}
. Normaltab {background-image: URL ('HTTP: // www.dc18.com/images/normal_tab.gif'); background-repeat: No-Repeat; color: #1f3a87 ;}
. Hovertab {background-image: URL ('HTTP: // www.dc18.com/images/hover_tab.gif'); background-repeat: No-Repeat; color: #1f3a87; font-weight: bold}
. Dis {display: block ;}
. Undis {display: none ;}
-->
</Style>

<Script language = JavaScript type = text/JavaScript>
<! --
Function g (o) {return document. getelementbyid (o );}
Function hoverli (n ){
// If there are n tags, I <= N;
// This function is very OK and compatible with IE7, ff, and IE6;
For (VAR I = 1; I <= 4; I ++) {G ('tb _ '+ I ). classname = 'normaltab'; G ('tbc _ 0' + I ). classname = 'undis ';} g ('tbc _ 0' + n ). classname = 'dis '; G ('tb _' + n ). classname = 'hovertab ';
}
// -->
</SCRIPT>

<Div class = "w936">
<Div class = Tb _ id = Tb _>
<Ul>
<Li class = "hovertab" id = tb_1 onmouseover = xgz: hoverli (1);> yanlei's Baidu blog </LI>
<Li class = "normaltab" id = tb_2 onmouseover = xgz: hoverli (2);> yanlei's Education Blog </LI>
<Li class = normaltab id = tb_3 onmouseover = xgz: hoverli (3);> welcome here </LI>
<Li class = "normaltab" id = tb_4 onmouseover = xgz: hoverli (4);> topic navigation </LI>
</Ul> </div>
<Div class = "CTT">
<Div class = dis id = tbc_01> content 1 </div>
<Div class = "Undis" id = tbc_02> content 2 </div>
<Div class = "Undis" id = tbc_03> content 3 </div>
<Div class = "Undis" id = tbc_04> content 4 </div>