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& ...
随机推荐
- NGUI屏幕自适应解决方案
NGUI研究院之自适应屏幕 http://www.xuanyusong.com/archives/2536 Unity3D研究院之使用Android的硬件缩放技术优化执行效率 http://www.x ...
- Oracle/PLSQL: Creating Functions
In Oracle, you can create your own functions. 译:在ORACLE中,你可以创建你自己的方法. The syntax for a function is: ...
- POJ2104 k-th number 划分树
又是不带修改的区间第k大,这次用的是一个不同的方法,划分树,划分树感觉上是模拟了快速排序的过程,依照pivot不断地往下划分,然后每一层多存一个toleft[i]数组,就可以知道在这一层里从0到i里有 ...
- POJ 1182 食物链(种类并查集)
记得第一次做这道题的时候,推关系感觉有点复杂,而且写完代码后一直WA,始终找不出错误. 在A了十几道并查集后,再做这道题,发现太小儿科了.发现原来之所以WA,就在于查找根节点时,没有同步更新子节点相对 ...
- POJ 1844
#include <iostream> #define MAXN 20 using namespace std; int value[MAXN]; int place[MAXN]; ]; ...
- Java的登陆验证问题
java中的登陆验证问题可以有多种方式进行验证,通过拦截器功能完成,可以通过过滤器功能完成,也可以简单的代码在JSP页面中单独完成,其中都 涉及到一个关键的验证步骤,这个验证原理ASP,PHP,JAV ...
- 应用程序出现挂死，.NET Runtime at IP 791F7E06 (79140000) with exit code 80131506.
工具出现挂死问题 1.问题描述 工具出现挂死问题,巡检IIS发现以下异常日志 现网系统日志: 事件类型: 错误 事件来源: .NET Runtime 描述: Application: Di ...
- 保障视频4G传输的流畅性，海康威视摄像头相关设置
我们目前的rtsp视频解决方案如下: 摄像头<---------->NVR(通过4G上传)<---------->easydarwin<---------->自己的 ...
- 1、探究java方法参数传递——引用传递？值传递！
原创博文,转载请注明出处.谢谢~~ java程序运行时,其对象是怎么进行放置和安排的呢?内存是怎么分配的呢?理解好这个很有好处!java有5个地方可以存储数据: 1.寄存器.这是最快的存储区,位于处理 ...
- Python数字加千分符
1.最简单的内置format函数: >>> format(1234567890,',') '1,234,567,890' 2.正则表达式: import re def formatN ...