【IT】【ASP.NET】纯手写滑动门JS代码(附效果) (11/823)

JS部分:

<style type=text/css>
td1 {
  color: #dce2ed;
  line-height: 150%;
  }
.sec2 { 
  background:url(../images/1.jpg);
  cursor: hand;
  color: #000000;
  border-left: 0px solid #ffecc8;
  border-top: 1px solid #ffffff;
  border-right: 0px solid gray;
  border-bottom: 0px solid #ffecc8;
  }
.sec3 {
  background:url(../images/黑.png);
  cursor: hand;
  color: #FFFFFF;
  border-left: 0px solid #FFFFFF;
  border-top: 1px solid #FFFFFF;
  border-right: 0px solid gray;
  font-weight:bold;
  }
.main_tab1 {
  background-color: #ffecc8;
  color: #000000;
  border-left:0px solid #ffecc8;
  border-right: 0px solid gray;
  border-bottom: 0px solid gray;
  }
</style>
   <script language=javascript>
function secBoard1(n)
{
 for(i=0;i<secTable.cells.length;i++)
  secTable.cells[i].className="sec2";
 secTable.cells[n].className="sec3";
 for(i=0;i<mainTable.tBodies.length;i++)
  mainTable.tBodies[i].style.display="none"; 
 mainTable.tBodies[n].style.display="block";
}
</script>

HTML设计部分:

          <table border="1" cellpadding="0" cellspacing="0" bordercolor="#ffecc8" style="height: 280px">
            <tr><td>           
            <table border=0 cellspacing=0 cellpadding=0 width=532px id=secTable >
            <tr height=22 align=left valign="bottom">
             <td class=sec2 width=79 onmouseover="secBoard1(0)">&nbsp;&nbsp;热点新闻</td>
             <td class=sec2 width=79 onmouseover="secBoard1(1)">&nbsp;&nbsp;业内评价</td>
             <%----%> <td width=351 style="background:url(../images/1.jpg);"></td>
            </tr>
           </table>
           <script>secBoard1(0);</script>
               <table border=0 cellspacing=0 cellpadding=0 width=532px height=245 id=mainTable class=main_tab>
                <tbody style="display:block;">
                <tr>
                 <td align=left valign=top>
                 <%--求租--%>

                 //数据绑定!!!(隐藏)
                 <%--!!!求租--%>
                  </td>
                </tr>
                </tbody> <tbody style="display:none;">
                <tr>
                 <td align=left valign=top>
                 <%--招租--%> 

                  </td>
                </tr>
                </tbody>
               </table>
               </td>
       </tr>
                </table>

效果:

1.

2.

3.

呵呵 以上都是比较简单的JS.不过对于一般的网站用的还蛮多的.

小弟不才.是看到新浪网上导航都是这样的.所以自己想写个.

没想到这么简单!

望前辈门多指教指教 看看那里可以继续更改?