CSS Sliding Door Technology 02
Last Update:2018-12-05
Source: Internet
Author: User
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Sliding Door Technology </title>
<Style media = "screen" type = "text/CSS">
<! --
* {Font-size: 12px ;}
HTML, body {margin: 0; text-align: center; over-flow: hidden; Height: 100%; width: 100% ;}
Ul {list-style-type: none; margin: 0px ;}
/* Standard box model */
. TTL {Height: 18px ;}
. CTT {Height: auto; padding: 6px; clear: Both; Border: 1px solid #064ca1; border-top: 0; text-align: Left ;}
. W936 {margin: 2px 0; clear: Both; width: 760px;/* adjust the width of the entire sliding door */}
/* Tab switching effect */
. Tb _ {background-image: URL ('HTTP: // region); background-repeat: Repeat-X; Background-color: # e6f2ff ;}
. Tb _ ul {Height: 24px ;}
. Tb _ Li {float: Left; Height: 24px; line-Height: 1.9; width: 94px; cursor: pointer ;}
/* Used to control the display and hidden CSS Classes */
. Normaltab {background-image: URL ('HTTP: // URLs); background-repeat: No-Repeat; color: #1f3a87 ;}
. Hovertab {background-image: URL ('HTTP: // URLs); background-repeat: No-Repeat; color: #1f3a87; font-weight: bold}
. Dis {display: block ;}
. Undis {display: none ;}
-->
</Style>
<SCRIPT type = "text/JavaScript" Language = "JavaScript">
// <! CDATA [
Function g (o ){
Return document. getelementbyid (O );
}
Function hoverli (n ){
For (VAR I = 1; I <= 6; I ++ ){
G ('tb _ '+ I). classname = 'normaltab ';
G ('tbc _ 0' + I). classname = 'undis ';
}
G ('tbc _ 0' + n). classname = 'dis ';
G ('tb _ '+ n). classname = 'vertab ';
}
// Change onmouseover in <li> to onclick if you want to make a click;
</SCRIPT>
</Head>
<Body>
<Div class = "w936">
<Div id = "Tb _" class = "Tb _">
<Ul>
<Li id = "tb_1" class = "hovertab" onmouseover = "hoverli (1);"> pop music </LI>
<Li id = "tb_2" class = "normaltab" onmouseover = "hoverli (2);"> beauty photo </LI>
<Li id = "tb_3" class = "normaltab" onmouseover = "hoverli (3);"> graphic design </LI>
<Li id = "tb_4" class = "normaltab" onmouseover = "hoverli (4);"> network school </LI>
<Li id = "tb_5" class = "normaltab" onmouseover = "hoverli (5);"> Love Story </LI>
<Li id = "tb_6" class = "normaltab" onmouseover = "hoverli (6);"> q pigeon </LI>
</Ul>
</Div>
<Div class = "CTT">
<Div class = "dis" id = "tbc_01"> popular music content <br/> sfsdfasdfsaff </div>
<Div class = "Undis" id = "tbc_02"> beauty photo content </div>
<Div class = "Undis" id = "tbc_03"> graphic design content </div>
<Div class = "Undis" id = "tbc_04"> network school content </div>
<Div class = "Undis" id = "tbc_05"> Love Story </div>
<Div class = "Undis" id = "tbc_06"> <B> Guilin sky </B> <br/> </div>
</Div>
</Div>
</Body>
</Html>