linux社区爱心援助Linux认证系列教程业界动态站务新闻公司招聘网络学院网址大全LPI专题CISCO专题
设为首页
加入收藏
管理团队
JSP  
JAVA  
PERL  
 您的位置:首页 > 开发语言 > JavaScript >
栏目导栏
  php
  JSP
  ASP
  asp.net
  JAVA
  c/c++/c#
  perl
  JavaScript
  Basic
  Delphi
资料搜索
热门文章
·javascript 时间对象的格式化
·去掉字符串前后的空格
·javascript 事件监听机制
·javascript 事件调用顺序
·js刷新框架子页面的七种方法
·JavaScript:替换字符串
·IE下的JScript编程需注意的内存
·用javascript操作word文档
·Javascript中CTRL+回车提交表单
·JS 获取鼠标位置
·javascript判断Email地址是否有
·Javascript中Select的OnChange
·JS实现的滑动展开与折叠效果
·有分页功能的WEB打印
·Javascript实现窗口最大化的严
最新文章
·使用CSS改变表格边框样式
·为网页添加浮动广告
·判断表单中添加是否数字的JS与
·让浏览器状态栏动起来
·使用Javascript制作行间颜色间
·禁止用右键查看源代码
·网页侦测四法
·制作弹出公告窗口
·为网页添加特效
·网页中取消鼠标右键方法大全
·JavaScript 根据屏幕解析度显示
·如何实现浏览器上的右键菜单
·如何制作浮动广告
·让弹出窗口变得“体贴”一些
·JavaScript技巧:让网页自动穿上
Google
 
Javascript实例:创建折叠式导航菜单
[ 作者:  加入时间:2007-10-09 12:05:51  来自:Linux联盟收集整理 ]

为了创建折叠式的导航菜单,你可以在网页的最前面部分以下代码:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function formHandler()

{

var URL = document.form.site.options

[document.form.site.selectedIndex].value;

window.location.href = URL;

// End -->

}

</SCRIPT>

那在网页上如何调用呢?以下是具体代码:

<CENTER>

<FORM name = "form">

<SELECT NAME="site" SIZE=1 onChange ="formHandler()">

<OPTION VALUE="">连接到….

<OPTION VALUE="http://www.pconline.com.cn">太平洋电脑网

<OPTION VALUE="http://cn.yahoo.com">中文雅虎

<OPTION VALUE="263">http://www.263.net">263网站

<OPTION VALUE="http://www.usnews.com">美国在线

<OPTION VALUE="http://www.neworiental.org">北京新东方

</SELECT>

</FORM>

</CENTER>

下面是全部的代码:

NPaLinux联盟
<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<SCRIPT LANGUAGE="JavaScript">

NPaLinux联盟
 

<!-- Begin

NPaLinux联盟
 

function formHandler()

NPaLinux联盟
 

{

NPaLinux联盟
 

var URL = document.form.site.options

NPaLinux联盟
 

[document.form.site.selectedIndex].value;

NPaLinux联盟
 

window.location.href = URL;

NPaLinux联盟
 

// End -->

NPaLinux联盟
 

}

NPaLinux联盟
 

</SCRIPT>

</head>

NPaLinux联盟
 

<FORM name = "form">

NPaLinux联盟
 

<SELECT NAME="site" SIZE=1 onChange ="formHandler()">

<option value="">连接到…. </option>

<option value="http://www.pcedu.com.cn">太平洋网络学院</option>

<option value="http://cn.yahoo.com">中文雅虎 </option>

<option value="263">http://www.263.net">263网站 </option>

<option value="http://www.usnews.com">美国在线 </option>

<option value="http://www.neworiental.org">北京新东方 </option>

</SELECT>

NPaLinux联盟
 

</FORM>

NPaLinux联盟
效果实现:

Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论

评论】【加入收藏夹】【 】【打印】【关闭
※ 相关链接
 ·Javascript实例: 创建"后退"按钮  (2007-10-09 12:52:12)
 ·Javascript实例:随机显示图片  (2007-10-09 12:51:15)
 ·Javascript实例:检验表单有效性  (2007-10-09 12:21:44)
 ·Javascript实例:利用Javascript基于浏览器类型的重定向  (2007-10-09 12:14:32)
 ·Javascript实例: 利用Javascript进行密码保护  (2007-10-09 12:12:40)
 ·Javascript实例:在一个表单中设置和检查Cookies  (2007-10-09 12:09:11)
 ·Javascript实例教程(4) 探测浏览器插件  (2007-10-09 12:08:09)
 ·Javascript实例:探测浏览器插件  (2007-10-09 12:07:11)
 ·Javascript实例: 创建弹出式窗口  (2007-10-09 12:04:53)