JS实现连接方式的菜单
<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'");
}
</SCRIPT>
</head>
<body>
<div align="center">
<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">
<div align="center">
<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>
</div>
</td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" width="100%" cellpadding="2" id="table2">
<tr>
<td>
<div align="center">
<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><BR></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">
<p style="line-height: 150%">
<font color="#FF0000"><b>链接1的内容：</b></font>酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西 <BR>湖北 淮扬 西餐 酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西 <BR>湖北 淮扬 西餐酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西 <BR>湖北 淮扬 西餐酒水 香烟 鲁菜 东北 官府 湘菜 苏菜 陕西 <BR>湖北 淮扬 西餐</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">
<p style="line-height: 150%">
<font color="#FF0000"><b>链接2的内容：</b></font>观前街 人民路 广济路 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家庄 西单 崇文门
苏州街 方庄 观前街 人民路 广济路 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家观前街 人民路 广济路 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家庄 西单 崇文门
苏州街 方庄 石路 朱家</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">
<p style="line-height: 150%">
<font color="#FF0000"><b>链接3的内容：</b></font>水煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃 <BR>鲍翅 快餐
鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤香辣蟹
火锅 羊蝎子 农家菜 烧烤鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤香辣蟹 火锅 羊蝎子
农家菜 烧烤鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤</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">
<p style="line-height: 150%">
<font color="#FF0000"><b>链接4的内容：</b></font>水煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃 <BR>鲍翅 快餐
农家菜 烧烤 小吃 <BR>鲍翅 快餐 农家菜 烧烤 小吃 <BR>鲍翅 快餐 煮鱼 烤鸭
香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃 <BR>鲍翅 快餐
农家菜 烧烤 小吃 <BR>鲍翅 快餐 农家菜 烧烤 小吃 <BR>鲍翅 快餐 </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">
<p style="line-height: 150%">
<font color="#FF0000"><b>链接5的内容：</b></font>水煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃 <BR>
鲍翅 快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐快餐 煮鱼 烤鸭 香辣蟹
火锅 羊蝎子 农家菜 烧烤 小吃 <BR>
鲍翅 快餐快餐快餐快餐快煮鱼 烤鸭 香辣蟹 火锅 羊蝎子 农家菜 烧烤 小吃 <BR>
鲍翅 快餐快餐快餐快餐快</TD></TR></TBODY></TABLE></TD>
<TD width=1><BR></TD></TR></TBODY></TABLE></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>
JS实现连接方式的菜单的更多相关文章
- Node.js Express连接mysql完整的登陆注册系统(windows)
windows学习环境: node 版本: v0.10.35 express版本:4.10.0 mysql版本:5.6.21-log 第一部分:安装node .Express(win8系统 需要&qu ...
- 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- Android 设置VPN(pptp连接方式)
本教程以小米手机的MIUI系统为例子,教大家如何设置VPN 先找到“设置”,打开设置菜单,如下图: 在设置菜单里面找“其它连接方式” 然后找到“VPN”,点击进入: 进入VPN设置界面后,如果VPN未 ...
- Apache HTTP Server 与 Tomcat 的三种连接方式介绍(转)
首先我们先介绍一下为什么要让 Apache 与 Tomcat 之间进行连接.事实上 Tomcat 本身已经提供了 HTTP 服务,该服务默认的端口是 8080,装好 tomcat 后通过 8080 端 ...
- CSS样式之连接方式
前言:上一篇博客是HTML基本结构和标签,是笔者学习HTML的笔记,本篇博客开始记录CSS,废话不多说,直接进入主题. 首先,我们要知道CSS是什么.简单地说,CSS层叠样式表是用来表现HTML或XM ...
- Apache HTTP Server 与 Tomcat 的三种连接方式介绍
本文转载自IBM developer 首先我们先介绍一下为什么要让 Apache 与 Tomcat 之间进行连接.事实上 Tomcat 本身已经提供了 HTTP 服务,该服务默认的端口是 8080,装 ...
- [转]Apache HTTP Server 与 Tomcat 的三种连接方式介绍
首先我们先介绍一下为什么要让 Apache 与 Tomcat 之间进行连接.事实上 Tomcat 本身已经提供了 HTTP 服务,该服务默认的端口是 8080,装好 tomcat 后通过 8080 端 ...
- ASP.NET MVC深入浅出系列(持续更新) ORM系列之Entity FrameWork详解（持续更新） 第十六节：语法总结(3)(C#6.0和C#7.0新语法) 第三节：深度剖析各类数据结构(Array、List、Queue、Stack)及线程安全问题和yeild关键字 各种通讯连接方式 设计模式篇 第十二节: 总结Quartz.Net几种部署模式(IIS、Exe、服务部署【借
ASP.NET MVC深入浅出系列(持续更新) 一. ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态模 ...
- Ajax:实现后台验证js实现get方式的异步请求，判断用户名是否重复
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html& ...
随机推荐
- Unity3D脚本中文系列教程(十七)
http://dong2008hong.blog.163.com/blog/static/469688272014032332976/ ◆ Static function PrefixLabel(to ...
- linux源代码阅读笔记 八进制
c语言中,众所周知,以0x开头的数是16进制数.例如 0x8FFF 然而较少使用的是八进制数.它以0开头.例如 01234
- [转载]Spring Beans Auto-Wiring
Autowiring Modes You have learnt how to declare beans using the <bean> element and inject < ...
- codeforces 295E Yaroslav and Points (离线操作+离散化+区间合并)
参考链接:http://blog.csdn.net/dyx404514/article/details/8817717 写的很详细,这里就不再赘述,附上我的代码. #include <iostr ...
- lintcode 中等题：Submatrix sum is 0 和为零的子矩阵
和为零的子矩阵 给定一个整数矩阵,请找出一个子矩阵,使得其数字之和等于0.输出答案时,请返回左上数字和右下数字的坐标. 样例 给定矩阵 [ [1 ,5 ,7], [3 ,7 ,-8], [4 ,-8 ...
- *[codility]Peaks
https://codility.com/demo/take-sample-test/peaks http://blog.csdn.net/caopengcs/article/details/1749 ...
- 在mybatis执行SQL语句之前进行拦击处理
转载自:http://blog.csdn.net/hfmbook/article/details/41985853 比较适用于在分页时候进行拦截.对分页的SQL语句通过封装处理,处理成不同的分页sql ...
- java @param参数注解
注解,@param是参数的解释.如/***@param s 这里表示对s的文字说明,描述 */ public void aa(String s){}一般java中@表示注解,解释一个方法,类,属性的作 ...
- linux服务器下发送邮件
系统管理人员经常会遇到对于设备或者任务的预警与通知,通常情况有发送短信.邮件等方式.发送短信一般来说需要有短信猫(硬件)或者调用libfetion给飞信用户发送.本文介绍几种简单的发送邮件的方式. 本 ...
- Java学习笔记之：Java数据类型的转换
一.介绍 数据类型的转换,分为自动转换和强制转换.自动转换是程序在执行过程中“悄然”进行的转换,不需要用户提前声明,一般是从位数低的类型向位数高的类型转换:强制类型转换则必须在代码中声明,转换顺序不受 ...