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

2007-03-08　源自:IT粉丝网　网友评论 0 条　进入视频教程

<html><head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>网页<a href='http://www.itfensi.com/exploit/web/' target='_blank' class='infotextkey'>特效</a>|itfensi.com/Js|---用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>观前街 人民路 广济路 石路 朱家庄 西单 崇文门  								<br>								苏州街 方庄 石路 朱家庄 西单 崇文门  								<br>								苏州街 方庄 石路 朱家庄 西单 崇文门  								<br>								苏州街 方庄 观前街 人民路 广济路 石路 朱家庄 西单 崇文门  								<br>								苏州街 方庄 石路 朱家庄 西单 崇文门  								<br>								苏州街 方庄 石路 朱家观前街 人民路 广济路 石路 朱家庄 西单 崇文门  								<br>								苏州街 方庄 石路 朱家庄 西单 崇文门  								<br>								苏州街 方庄 石路 朱家</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>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇：下拉列表分组显示的下拉框
下一篇：三级下拉菜单 (通用版)

内容评论文章纠错发送朋友收藏本文

复制本文链接(URL)发送给朋友：

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

相关内容

开发频道推荐

开发热点文章