JavaScript tab tab effect instance _javascript tips

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>javascript tab TAB </title>
<script type= "Text/javascript" >
function Changetab (ID, MiniD, topcount)
{
for (Var I=minid i < Minid+topcount; i++)
{
if (id = = i)
{
document.getElementById ("Li_" + i). ClassName = "on";
document.getElementById ("Html_" + i). Style.display = "block";
}
Else
{
document.getElementById ("Li_" + i). ClassName = "";
document.getElementById ("Html_" + i). Style.display = "None";
}
}
}
</script>
<style type= "Text/css" >
. None{display:none;}
Ul,li{list-style:none; margin:0; padding:0; font-size:12px;}
. tab{margin:100px;}
. tabtitle Ul{overflow:hidden; zoom:1 border-left:1px solid #D5D3D4;}
. tabtitle li{width:82px; height:30px line-height:30px; Float:left text-align:center; Background:url (/2010/07/ tab1.jpg) No-repeat;}
. Tabtitle Li.on{background:url (/uploads/2010/07/tab2.jpg) no-repeat;}
#html_1, #html_2, #html_3, #html_4, #html_5, #html_6 {border:1px solid #D5D3D4; border-top:none; width:245px; : 100px;}
</style>

<body>

<div class= "tab" >
<div class= "Tabtitle" >
<ul>
<li id= "Li_1" class= "on" onmouseover= "Changetab (1, 1, 3);" > Today's top </li>
<li id= "li_2" onmouseover= "Changetab (2, 1, 3);" > Hot this week </li>
<li id= "Li_3" onmouseover= "Changetab (3, 1, 3);" > Hot this month </li>
</ul>
</div>
<div id= "Html_1" >
Content 1
</div>
<div id= "html_2" class= "None" >
Content 2
</div>
<div id= "Html_3" class= "None" >
Content 3
</div>
</div>
<div class= "tab" >
<div class= "Tabtitle" >
<ul>
<li id= "Li_4" class= "on" onmouseover= "Changetab (4, 4, 3);" > Recommended Today </li>
<li id= "Li_5" onmouseover= "Changetab (5, 4, 3);" > Recommended this week </li>
<li id= "Li_6" onmouseover= "Changetab (6, 4, 3);" > Recommended this month </li>
</ul>
</div>
<div id= "Html_4" >
Content 1
</div>
<div id= "Html_5" class= "None" >
Content 2
</div>
<div id= "Html_6" class= "None" >
Content 3
</div>
</div>
</body>
</tr>
</table>