tab选项卡

最近做东西，常用到的东西了。

<style type="text/css">

<!--

.tab1
{
 background-image:url(../img/tab1.jpg);
 background-repeat:no-repeat;
 width:59px;
 height:25px;
 font-size:12px;
 color:#1f376d;
 line-height:25px;
 text-align:center;
 cursor:pointer;
}
.tab
{
 background-image:url(../img/tab.jpg);
 background-repeat:no-repeat;
 width:59px;
 height:25px;
 font-size:12px;
 color:#333333;
 line-height:25px;
 text-align:center;
 cursor:pointer;
}

-->

</style>

<script type="text/javascript">
<!--
 function  tablist(n)
     {
       for(i=0;i<secTable.cells.length;i++)
       secTable.cells[i].className="tab";
       secTable.cells[n].className="tab1";
       for(i=0;i<mainTable.tBodies.length;i++)
       mainTable.tBodies[i].style.display="none";
       mainTable.tBodies[n].style.display="block";
     }
-->
</script>

 

<table width="550" border="0" cellpadding="0" cellspacing="0" class="mp1" id="secTable">
        <tr>
          <td width="61" class="tab1" onClick="tablist(0)">河南网通</td>
          <td width="61" class="tab" onClick="tablist(1)">郑州网通</td>
          <td width="61" class="tab" onClick="tablist(2)">江西电信</td>
          <td width="61" class="tab" onClick="tablist(3)">江西双线</td>
          <td width="61" class="tab" onClick="tablist(4)">歌华双线</td>
          <td width="61" class="tab" onClick="tablist(5)">鼓楼双线</td>
          <td width="61" class="tab" onClick="tablist(6)">北京国研</td>
          <td width="61" class="tab" onClick="tablist(7)">江西网通</td>
          <td width="61" class="tab" onClick="tablist(8)">郑州四线</td>
        </tr>
      </table>

<table width="530" border="0" align="center" cellpadding="0" cellspacing="0" id="mainTable">
 <tbody style="display:block;">

<tr><td>时代的福德宫喝酒</td></tr>

</tbody>

<tbody style="display:block;">

<tr><td>时代的福德宫喝酒</td></tr>

</tbody>

</table>