复制代码 代码如下: gt;JavaScript版TAB选项卡<br> function changeTab(id, minId, topCount)<br> {<br> for(var i=minId; i {<br> if( id == i)<br> {<br> document.getElementById("li_" i).className = "on";<br> document.getElementById("html_" i).style.display = "block"; <br> }<br> else<br> {<br> document.getElementById("li_" i).className = "";<br> document.getElementById("html_" i).style.display = "无" ;<br> }<br> }<br> }<br><br><style type="text/css">.none{display:none;}<BR> ul,li{列表样式:无;保证金：0；填充：0；字体大小：12px;}<BR>.tab{边距：100px;}<BR>.tabTitle ul{溢出：隐藏;缩放：1；左边框：1px 实心 #D5D3D4;}<BR>.tabTitle li{宽度：82px;高度：30px；行高：30px；浮动：左；文本对齐：居中；背景:url(/2010/07/tab1.jpg) 不重复;}<BR>.tabTitle li.on{背景:url(/uploads/2010/07/tab2.jpg) 不重复;}<BR> #html_1,#html_2,#html_3,#html_4,#html_5,#html_6{边框:1px实心#D5D3D4;顶部边框：无；宽度：245px；高度：100px;}<BR></style><BR></head><BR><body> <P><div class="tab"><BR> <div class="tabTitle"><BR> <ul><BR> <li id="li_1" class="on" onmouseover ="changeTab(1, 1, 3);">本日热门</li><BR> <li id="li_2" onmouseover="changeTab(2, 1, 3);">本周热门</li><BR> <li id="li_3" onmouseover="changeTab(3, 1, 3);">本月热门</li><BR> </ul><BR> </div><BR> <div id="html_1"><BR> 内容1<BR> </div><BR> <div id="html_2" class="none"><BR> 内容2<BR> </div><BR> <div id="html_3" class="none"><BR> 内容3<BR> </div><BR></div> ;<BR><div class="tab"><BR> <div class="tabTitle"><BR> <ul><BR> <li id="li_4" class="on" onmouseover="changeTab(4, 4, 3);">本日推荐<BR> <li id="li_5" onmouseover="changeTab(5, 4, 3);">本周推荐</li><BR> <li id="li_6" onmouseover="changeTab(6, 4, 3);">本月推荐</li><BR> </ul><BR> </div><BR> <div id="html_4"><BR> 内容1<BR> </div><BR> <div id="html_5" class="none"> <BR> 内容2<BR> </style> </div> <br> <div id="html_6" class="none"> <br> 内容3<br> </div> <br> div><br></body><br></html></td><br> </tr><br> </table> <br>
