利用js制作tab切换选项卡源码

时间：2022-07-02 14:03:24 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<p>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type" /><style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
 
body { 
    font-family: "宋体"; 
    font-size: 12px; 
    color: #525252; 
} 
td { 
    font-family: "宋体"; 
    font-size: 12px; 
    color: #525252; 
} 
a:link { 
    color: #525252; 
    font-size: 12px; 
    text-decoration: none; 
} 
a:visited{ 
    color: #525252; 
    font-size: 12px; 
    text-decoration: none; 
} 
a:hover { 
    color: #ff6600; 
    font-size: 12px; 
    text-decoration: underline; 
} 
.gd1{ 
    font-family: "宋体"; 
    font-size: 12px; 
    color: #ff0000; 
} </style></p>
<SCRIPT language=javascript> 
function secBoard(n) 
  { 
    for(i=0;i<secTable.cells.length;i++) 
      secTable.cells

[i].className="sec11"; 
    secTable.cells[n].className="sec21"; 
    for(i=0;i<mainTable.tBodies.length;i++) 
      mainTable.tBodies 
[i].className="sec21"; 
    secTable.cells[n].className="sec31"; 
    for(i=0;i<mainTable.tBodies.length;i++) 
      mainTable.tBodies

[i].className="sec31"; 
    secTable.cells[n].className="sec41"; 
    for(i=0;i<mainTable.tBodies.length;i++) 
      mainTable.tBodies

[i].style.display="none"; 
    mainTable.tBodies

[n].style.display="block"; 
  } 
</SCRIPT>
<div align="center">
<p>
<table id="table7" style="border-collapse: collapse" height="145" cellspacing="0" cellpadding="0" width="200" bgcolor="#262626" border="0">
    <tbody>
        <tr>
            <td height="145">
            <div align="center">
            <table id="table107" style="border-collapse: collapse" height="140" cellpadding="0" width="220" border="0">
                <tbody>
                    <tr>
                        <td bgcolor="#262626" height="25">
                        <div align="center">
                        <table id="secTable" style="border-collapse: collapse" height="22" cellpadding="0" width="216" border="0">
                            <tbody>
                                <tr>
                                    <td class="sec21" onmouseover="secBoard(0)" width="23%">
                                    <p align="center"><font color="#ffff00">充值</font></p>
                                    </td>
                                    <td class="sec11" onmouseover="secBoard(1)" width="19%">
                                    <p align="center"><font color="#ffff00">帐号</font></p>
                                    </td>
                                    <td class="sec31" onmouseover="secBoard(2)" width="22%">
                                    <p align="center"><font color="#ffff00">代理</font></p>
                                    </td>
                                    <td class="sec41" onmouseover="secBoard(3)" width="20%">
                                    <p align="center"><font color="#ffff00">外挂</font></p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </div>
                        </td>
                    </tr>
                    <tr>
                        <td >
                        <div align="center">
                        <table id="mainTable" style="border-collapse: collapse" height="115" cellpadding="0" width="195" border="0">
                            <tbody style="display: block">
                                <tr>
                                    <td height="145">
                                    <div align="center">
                                    <table style="border-collapse: collapse" height="138" cellpadding="0" width="205" border="0">
                                        <tbody>
                                            <tr>
                                                <td width="195" height="23">
                                                <table id="table108" style="font-size: 9pt" cellspacing="2" cellpadding="0" width="216" border="0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="55%" bgcolor="#1b1f28" height="21"><font color="#ffffff">AION 3小时充卡 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="27%" bgcolor="#1b1f28"><font color="#ffffff">　￥25 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="55%" bgcolor="#1b1f28" height="21"><font color="#ffffff">AION 30小时充卡 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="27%" bgcolor="#1b1f28"><font color="#ffffff">　￥70 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="55%" bgcolor="#1b1f28" height="21"><font color="#ffffff">AION 300小时充卡 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="27%" bgcolor="#1b1f28"><font color="#ffffff">　￥100 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="55%" bgcolor="#1b1f28" height="21"><font color="#ffffff">AION 900小时充卡 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="27%" bgcolor="#1b1f28"><font color="#ffffff">　￥230 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="55%" bgcolor="#1b1f28" height="21"><font color="#ffffff">天堂1 天堂2 3小时点卡 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="27%" bgcolor="#1b1f28"><font color="#ffffff">　￥25 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="55%" bgcolor="#1b1f28" height="21"><font color="#ffffff">天堂1 天堂2 5小时点卡 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="27%" bgcolor="#1b1f28"><font color="#ffffff">　￥40 元 </font></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody style="display: none">
                                <tr>
                                    <td >
                                    <div align="center">
                                    <table style="border-collapse: collapse" height="138" cellpadding="0" width="205" border="0">
                                        <tbody>
                                            <tr>
                                                <td width="195" height="23">
                                                <table id="table109" style="font-size: 9pt" cellspacing="2" cellpadding="0" width="224" border="0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="59%" bgcolor="#1b1f28" height="21"><font color="#ffffff">天堂，天堂2 手机验证号 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="28%" bgcolor="#1b1f28"><font color="#ffffff">　￥45 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="59%" bgcolor="#1b1f28" height="21"><font color="#ffffff">R2帐号(安全帐号) 6个月 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="28%" bgcolor="#1b1f28"><font color="#ffffff">　￥350 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="59%" bgcolor="#1b1f28" height="21"><font color="#ffffff">R2帐号 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="28%" bgcolor="#1b1f28"><font color="#ffffff">　￥70 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="59%" bgcolor="#1b1f28" height="21"><font color="#ffffff">WOW 魔兽 1组 （3账号） </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="28%" bgcolor="#1b1f28"><font color="#ffffff">　￥70 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="59%" bgcolor="#1b1f28" height="21"><font color="#ffffff">AION(保3个月24小时 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="28%" bgcolor="#1b1f28"><font color="#ffffff">　￥250 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="59%" bgcolor="#1b1f28" height="21"><font color="#ffffff">ION ,天堂合并账号</font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="28%" bgcolor="#1b1f28"><font color="#ffffff">　￥400 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="59%" bgcolor="#1b1f28" height="21"><font color="#ffffff">WOW 魔兽 （保3个月） </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" align="left" width="28%" bgcolor="#1b1f28"><font color="#ffffff">　￥150 元 </font></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody style="display: none">
                                <tr>
                                    <td >
                                    <div align="center">
                                    <table style="border-collapse: collapse" height="138" cellpadding="0" width="205" border="0">
                                        <tbody>
                                            <tr>
                                                <td width="195" height="23">
                                                <table id="table110" style="font-size: 9pt" cellspacing="2" cellpadding="0" width="221" border="0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" width="53%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　直连韩国 VPN </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" width="32%" bgcolor="#1b1f28"><font color="#ffffff">　￥60 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" width="53%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　独立通道 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" width="32%" bgcolor="#1b1f28"><font color="#ffffff">　￥70 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" width="53%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　PVPN </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" width="32%" bgcolor="#1b1f28"><font color="#ffffff">　￥55 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" width="53%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　R2专用独立通道 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" width="32%" bgcolor="#1b1f28"><font color="#ffffff">　￥120 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" width="53%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　天堂2 专用通道 </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" width="32%" bgcolor="#1b1f28"><font color="#ffffff">　￥80 元 </font></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 9pt; color: #00ff00" width="53%" bgcolor="#1b1f28" height="21"><font color="#ffffff">R2网吧通道（可以挂机） </font></td>
                                                            <td style="font-size: 9pt; color: #00ff00" width="32%" bgcolor="#1b1f28"><font color="#ffffff">　￥160 元 </font></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody style="display: none">
                                <tr>
                                    <td >
                                    <table id="table111" style="font-size: 9pt" cellspacing="2" cellpadding="0" width="218" border="0">
                                        <tbody>
                                            <tr>
                                                <td style="font-size: 9pt; color: #00ff00" width="54%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　AION 圣战外挂中文版 </font></td>
                                                <td style="font-size: 9pt; color: #00ff00" width="30%" bgcolor="#1b1f28"><font color="#ffffff">　￥30 元 </font></td>
                                            </tr>
                                            <tr>
                                                <td style="font-size: 9pt; color: #00ff00" width="54%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　天堂2 （行者 / 风云） </font></td>
                                                <td style="font-size: 9pt; color: #00ff00" width="30%" bgcolor="#1b1f28"><font color="#ffffff">　￥25 元 </font></td>
                                            </tr>
                                            <tr>
                                                <td style="font-size: 9pt; color: #00ff00" width="54%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　R2 ( 圣战 / 富辰) </font></td>
                                                <td style="font-size: 9pt; color: #00ff00" width="30%" bgcolor="#1b1f28"><font color="#ffffff">　￥90 元 </font></td>
                                            </tr>
                                            <tr>
                                                <td style="font-size: 9pt; color: #00ff00" width="54%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　R2 NEO内挂韩版 </font></td>
                                                <td style="font-size: 9pt; color: #00ff00" width="30%" bgcolor="#1b1f28"><font color="#ffffff">　￥125 元 </font></td>
                                            </tr>
                                            <tr>
                                                <td style="font-size: 9pt; color: #00ff00" width="54%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　天堂一霸王 </font></td>
                                                <td style="font-size: 9pt; color: #00ff00" width="30%" bgcolor="#1b1f28"><font color="#ffffff">　￥160 元 </font></td>
                                            </tr>
                                            <tr>
                                                <td style="font-size: 9pt; color: #00ff00" width="54%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　天堂一 odin </font></td>
                                                <td style="font-size: 9pt; color: #00ff00" width="30%" bgcolor="#1b1f28"><font color="#ffffff">　￥300 元 </font></td>
                                            </tr>
                                            <tr>
                                                <td style="font-size: 9pt; color: #00ff00" width="54%" bgcolor="#1b1f28" height="21"><font color="#ffffff">　天堂一补助系统 </font></td>
                                                <td style="font-size: 9pt; color: #00ff00" width="30%" bgcolor="#1b1f28"><font color="#ffffff">　￥100 元 </font></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            </td>
        </tr>
    </tbody>
</table>
</p>
<p>由<a href="http://111com.net">中国WEB第一站</a>提供</p>
</div>
<p>　</p>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

利用js制作tab切换选项卡源码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程