js之类似tab的实现

预实现效果:(点击不同的tab显示不同面板内容)

 一:用到的js函数:

 1 <script language="javascript" type="text/javascript" >
 2 //变换tab函数
 3 //原则,外层div里含有内层多个div
 4 function tabPanelEx(trThis,urlImgNormal,urlImgPoint,tabs,tabid){
 5     var tds=trThis.parentNode.children;
 6     for(var i=0;i<tds.length;i++)
 7     {
 8         if(tds[i].attributes["ex"])
 9         {
10             tds[i].style.backgroundImage="url("+urlImgNormal+")";
11         }
12     }
13     trThis.style.backgroundImage="url("+urlImgPoint+")";
14     //div control
15     var vtabs=document.getElementById(tabs).children;
16     for(var j=0;j<vtabs.length;j++)
17     {
18         vtabs[j].style.display="none";
19     }
20     document.getElementById(tabid).style.display="block";
21 }
22 </script>

二:页面调用代码;

 1  <table width="768" border="0" cellspacing="0" cellpadding="0">
 2              <!-- tab上方按钮行 -->
 3               <tr valign="bottom">
 4                 <td height="37" background="../images/a_06.jpg">
 5                     <table border="0" cellspacing="0" cellpadding="0">
 6                         <tr>
 7                           <td width="16" height="32" valign="bottom"></td>
 8                           <td ex="true" width="94" height="32" align="right" valign="middle" background="../images/an_01.jpg" style="cursor:pointer" 
 9                             onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab1')">
10                             <div style="width:72px;height:28px;line-height:28px;text-align:left;" class="bllb14">全员教育 </div></td>
11                           <td width="7" height="32"></td>
12                           <td ex="true" width="94" height="32" align="right" valign="middle" background="../images/an_02.jpg" style="cursor:pointer"
13                             onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab2')" >
14                             <div style="width:72px;height:28px;line-height:28px;text-align:left;" class="bllb14">医界动态 </div></td>
15                         </tr>
16                     </table>
17                 </td>
18               </tr>
19               <!-- 间隙 -->
20               <tr>
21                 <td height="5" align="center"></td>
22               </tr>
23               <!-- 对应内容 -->
24               <tr>
25                 <td align="center">
26                     <div id="newTabs">
27                         <div id="newsTab1">
28                             <table width="768" border="0" cellspacing="0" cellpadding="0">
29                                 <tr>
30                                   <td width="384" height="240" align="left" valign="top"><p>全员教育</p>
31                                   </td>
32 
33                                   <td width="1" height="240" background="../images/a_07.jpg"></td>
34 
35                                   <td width="384" height="240" align="right" valign="top">全员教育</td>
36                                 </tr>
37                             </table>
38                         </div>
39                         <div id="newsTab2" style="display:none">
40                             <table width="768" border="0" cellspacing="0" cellpadding="0">
41                                 <tr>
42                                   <td width="384" height="240" align="left" valign="top">医界动态</td>
43                                   <td width="1" height="240" background="../images/a_07.jpg"></td>
44                                   <td width="384" height="240" align="right" valign="top">医界动态</td>
45                                 </tr>
46                             </table>
47                         </div>
48                     </div>
49                 </td>
50               </tr>
51           </table>

调用解释:

(1)使用的为table,table结构为:

 <table width="768" border="0" cellspacing="0" cellpadding="0">
     <!-- tab上方按钮行 -->
      <tr valign="bottom">
        <td 第一行菜单 tab>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td  调用onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab1')" 显示newTabs内的newsTab1>
                    <div style="width:72px;height:28px;line-height:28px;text-align:left;" class="bllb14">全员教育 </div></td>
                   <td  调用onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab2')" 显示newTabs内的newsTab2>
                    <div style="width:72px;height:28px;line-height:28px;text-align:left;" class="bllb14">医界动态 </div></td>
            </table>
        </td>
      </tr>
      <!-- 间隙 -->
      <tr>
        <td height="5" align="center"></td>
      </tr>
      <!-- 对应内容 -->
      <tr>
        <td align="center">
            <div id="newTabs">
                <div id="newsTab1">
                全员教育
                </div>
                <div id="newsTab2" style="display:none">
                医界动态
                </div>
            </div>
        </td>
      </tr>
  </table>

完整文件下载