Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 用JS实现的类似框架的链接导航模式

用JS实现的类似框架的链接导航模式

发布时间:2016-11-29   编辑:www.jquerycn.cn
jquery中文网为您提供用JS实现的类似框架的链接导航模式等资源,欢迎您收藏本站,我们将为您提供最新的用JS实现的类似框架的链接导航模式资源
提示:您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" ><html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>用JS实现的类似框架的链接导航模式</title> <script language=JavaScript> function secBoard(n) { for(i=1;i<6;i ) { eval("document.getElementById('cel" i "').style.background=''"); } eval("document.getElementById('cel" n "').style.background='CCCCCC'"); for(i=1;i<6;i ) eval("tbx0" i ".style.display='none'"); eval("tbx0" n ".style.display='block'"); } <table border="0" width="600" cellpadding="0" style="border-collapse: collapse" id="table1"> <tr> <td width="93" height="125" align="center" valign="top"> <table border="0" width="100%" cellpadding="2" id="table28"> <tr> <td valign="top">
<table border="1" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#FF0000" id="table29"> <tr> <td id=cel1 onclick=secBoard(1) style="cursor:hand" height="25" align="center">链接1</td> </tr> <tr> <td id=cel2 onclick=secBoard(2) style="cursor:hand" height="25" align="center">链接2</td> </tr> <tr> <td id=cel3 onclick=secBoard(3) style="cursor:hand" height="25" align="center">链接3</td> </tr> <tr> <td id=cel4 onclick=secBoard(4) style="cursor:hand" height="25" align="center">链接4</td> </tr> <tr> <td id=cel5 onclick=secBoard(5) style="cursor:hand" height="25" align="center">链接5</td> </tr> </table>
</td> </tr> </table> </td> <td valign="top"> <table border="0" width="100%" cellpadding="2" id="table2"> <tr> <td>
<table border="1" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#0000FF" id="table3"> <tr> <td valign="top"><table id=Table27 cellspacing=0 cellpadding=0 width=300 border=0> <tbody> <tr> <td width=1 bgcolor=#a9a9a9 height="1"></td> <td class=p2 width=298 bgcolor="#CCCCCC" height="1"></td></tr> <tr> <td width=1>
</td> <td class=p2 width=298> <table id=tbx01 style="DISPLAY: block" cellspacing=5 cellpadding=0 width="100%" align=center border=0> <tbody> <tr> <td class=p2>

链接1的内容:酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西
湖北 淮扬 西餐 酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西
湖北 淮扬 西餐酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西
湖北 淮扬 西餐酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西
湖北 淮扬 西餐</td></tr></tbody></table> <table id=tbx02 style="DISPLAY: none" cellspacing=5 cellpadding=0 width="100%" align=center border=0> <tbody> <tr> <td class=p2>

链接2的内容:观前街 人民路 广济路 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家庄 西单 崇文门
苏州街 方庄 观前街 人民路 广济路 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家观前街 人民路 广济路 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家</td></tr></tbody></table> <table id=tbx03 style="DISPLAY: none" cellspacing=5 cellpadding=0 width="100%" align=center border=0> <tbody> <tr> <td class=p2>

链接3的内容:水煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃
鲍翅 快餐 鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤香辣蟹 火锅 羊蝎子 农家菜 烧烤鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤香辣蟹 火锅 羊蝎子 农家菜 烧烤鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤</td></tr></tbody></table> <table id=tbx04 style="DISPLAY: none" cellspacing=5 cellpadding=0 width="100%" align=center border=0> <tbody> <tr> <td class=p2>

链接4的内容:水煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃
鲍翅 快餐 农家菜 烧烤 小吃
鲍翅 快餐 农家菜 烧烤 小吃
鲍翅 快餐 煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃
鲍翅 快餐 农家菜 烧烤 小吃
鲍翅 快餐 农家菜 烧烤 小吃
鲍翅 快餐 </td></tr></tbody></table> <table id=tbx05 style="DISPLAY: none" cellspacing=5 cellpadding=0 width="100%" align=center border=0> <tbody> <tr> <td class=p2>

链接5的内容:水煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃
鲍翅 快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐 煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃
鲍翅 快餐快餐快餐快餐快煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃
鲍翅 快餐快餐快餐快餐快</td></tr></tbody></table></td> <td width=1>
</td></tr></tbody></table></td> </tr> </table>

</td> </tr> </table> </td> </tr> </table>
</body> </html></textarea>
提示:您可以先修改部分代码再运行

您可能感兴趣的文章:
JavaScript编程基础(13)-框架编程
jquery、js操作frame,iframe的方法介绍
什么是MVC模式
Asp.net 页面导航的几种方法与比较
google开始可以抓取框架内容
对css滑动门技术的一些总结和归纳
Jquery操作iframe的方法汇总
jquery iframe操作详细解析
用JS实现的类似框架的链接导航模式
ASP.NET四种页面导航方式的比较与选择

[关闭]
最近更新
浏览排行