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& ...
随机推荐
- cf div2 234 E
E. Inna and Binary Logic time limit per test 3 seconds memory limit per test 256 megabytes input sta ...
- POJ 2528 Mayor's posters (线段树，染色问题，离散化要注意)
做这题建议看一下该题的discuss. #include <iostream> #include <stdio.h> #include <string.h> #in ...
- Project Euler 88：Product-sum numbers 积和数
Product-sum numbers A natural number, N, that can be written as the sum and product of a given set o ...
- lintcode ：Longest Palindromic Substring 最长回文子串
题目 最长回文子串 给出一个字符串(假设长度最长为1000),求出它的最长回文子串,你可以假定只有一个满足条件的最长回文串. 样例 给出字符串 "abcdzdcab",它的最长回文 ...
- lintcode ：Integer to Roman 整数转罗马数字
题目 整数转罗马数字 给定一个整数,将其转换成罗马数字. 返回的结果要求在1-3999的范围内. 样例 4 -> IV 12 -> XII 21 -> XXI 99 -> XC ...
- lintcode：Recover Rotated Sorted Array恢复旋转排序数组
题目: 恢复旋转排序数组 给定一个旋转排序数组,在原地恢复其排序. 样例 [4, 5, 1, 2, 3] -> [1, 2, 3, 4, 5] 挑战 使用O(1)的额外空间和O(n)时间复杂度 ...
- PHP中的多态
多态的概念一般是强类型语言来谈的,因为强类型语言它必须要声明参数类型,比如一个手电筒对象的打开方法其参数申明了只能是蓝光,就不能传其他光.但可以用父类渲染的方式使其多态,比如声明一个光的父类,让其它颜 ...
- VC程序查错之内存访问异常
作者:langouster 先来看下面这张图,相信很多程序员都见过类似. ---------------------------test1.exe - 应用程序错误------------------ ...
- photoshop：调整图层之色相/饱和度
色相/饱和度:快速调色及调整图片色彩浓淡明暗 面板主要参数:色相.饱和度.明度 色相用来改变颜色:顺序按红-黄-绿-青-蓝-洋红 饱和度用来控制色彩浓淡 明度控制色彩明暗 勾选“着色”,图片会变成单色 ...
- linux自动启动shell和init概述(fedora use systemmd now!!!)
linux运行级别 linux启动之后会在一个级别运行,下面列出了这些运行级别: 0 系统停止 1 单用户系统,不需要登陆 2 多用户系统但不支持NFS,命令行模式登陆 3 完整多用户模式,命令行模 ...