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& ...
随机推荐
- Javascript的9张思维导图学习
思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具.思维导图运用图文并重的技巧,把各级主题的关系用相互隶属与相关的层级图表现出来 ...
- hdu 4447 Yuanfang, What Do You Think?
思路: 这题有个结论也可以自己归纳: 对于给定的n,其约数用pi表示 T(n)=T(p1)T(p2)……T(pn)T(n') 其中T(n')是这个式子所独有的也就是 T(n')=(x^n-1)/T(p ...
- SQO2008配置管理工具服务显示远程过程调用失败
前两天,装了VS2012后,打开SQL2008配置管理工具,发现SQL服务名称里什么也没有,只有一个提示:(如图) 卸载了一个叫"Microsoft SQL Server 2012Local ...
- Android 设置界面的圆角选项
请先看一个图: 像这种界面的设计,其实是这样的:整体为一个LinearLayout,一个一个排下去,每一个点击项都是一个RelativeLayout(要为其设置clickable为true),分为左右 ...
- MySQL.. ERROR! The server quit without updating PID file问题解决
不小心将服务器OS给重启了,再启动数据库的时候,出现了很奇怪的问题 [root@dev run]# service mysql restart ERROR! MySQL server PID file ...
- 超实用js代码段一
1: 过滤首尾空格trim.2:过滤左边空格ltrim 3:过滤右边空格 一:用正则方法写成三个函数. <script type="text/javascript" ...
- 服务器端json解析
1.客户端通过http传上来的可定都是json数据啊,json数据传到服务器端,就要通过键值对getkey方法得到具体值,对吧,然后再操控具体值. 2.JSONObject与JSONArray: Js ...
- hadoop拾遗（二）---- 文件模式
在单个操作中处理一批文件,这是一个常见的要求.举例来说,处理日志的MapReduce作业可能需要分析一个月内包含在大量目录中的日志文件.在一个表达式中使用通配符来匹配多个文件是比较方便的,无需列举第个 ...
- jquery.post用法
使用ajax在前端验证是否执行某个操作 jquery.post参数为 url,[data],[callback],[type] url:发送请求地址. data:待发送 Key/value 参数. c ...
- C#使用sharppcap实现网络抓包
sharppcap dll的下载地址: http://sourceforge.net/directory/os:windows/?q=sharppcap 具体使用详细步骤: http://www.co ...