Back a few friends, about sliding door code, then I have not used ie7,ff, the result, found only in the IE6 run, the code is also very long; today, I have friends to ask me this, I had to spend a little time, finally this Dongdong finished, I hope you like;
Compatible IE7; Ff;ie6
The code is simpler and easier to read;
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <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:936px;/* Here Adjusts the width of the entire sliding door * */}/* TAB switch effect. Tb_{background-image:url (' http:// Www.dc18.com/images/barbg_tab.gif '); 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 class/. 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 type= "Text/javascript" language= "JavaScript" >//<! cdata[function g (o) {return document.getElementById (o);} function Hoverli (n) {//if there are N tags, the i<=n; This feature is very OK, compatible ie7,ff,ie6;http://www.xiaogezi.cn/[small pigeon] Series 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= ' Hovertab '; //If you want to make a click and then turn to the <li> onmouseover to the onclick; ]]> </script> </pead> <body> <div class= "w936" > <div id= "tb_" class= "Tb_" > <ul> <li id= "tb_1" class= "Hovertab" onmouseover= "X:hoverli" (1); " > Pop music;/li> <li id= "tb_2" class= "Normaltab" onmouseover= "I:hoverli" (2); " > Beauty photo </li> <li id= "Tb_3" class= "Normaltab" onmouseover= "A:hoverli" (3); " > Graphic Design </li> <li id= "Tb_4" class= "Normaltab" onmouseover= (4); " > Network Academy </li> <li id= "tb_5" class= "Normaltab" onmouseover= (5); " > Love treasure </li> <li id= "tb_6" class= "Normaltab" onmouseover= (6); " > Q Small Pigeon </li> </ul> </div> <div class= "CTT" > ;d IV class= "DIS" id= "tbc_01" > Popular music content </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" > The content </div> of love treasure <div class= "Undis" id= "tbc_06" ><b>[q Small dove] content </b> </div> </div> </ div> <pr author= "http://xiaogezi.cn" size= "1" noshade= "NoShade"/> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
