Javascript实例教程(2) 创建折叠式导航菜单

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

<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="http://www.263.net">263网站 

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

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

</SELECT> 

</FORM> 

</CENTER> 
下面是全部的代码:
 
<head>

<title>Untitled Document</title>

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

<SCRIPT LANGUAGE="JavaScript"> 

 
<!-- Begin 

 
function formHandler() 

 


 
var URL = document.form.site.options 

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

 
window.location.href = URL; 

 
// End --> 

 


 
</SCRIPT>

</head> 

 


<FORM name = "form"> 

 
<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="http://www.263.net">263网站 </option>

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

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

</SELECT> 

 
</FORM> 

 
 

 
 

 
效果实现:







连接到…. 太平洋网络学院 中文雅虎 163邮箱 美国在线 javascript教程

 感谢原创者的辛勤劳动,希望对您有所帮助,转载请注明原出处。
 您可能对 [javascript] 的这些文章也感兴趣:

关于ie的内存泄漏与javascript内存释放
js与java的区别
Java初学者都必须理解的六大问题
Javascript实现的自动验证函数
如何在服务端(Page.Write)调用自定义的JS方法
OpenLayer + Ags 综合应用(一)--OpenLayer 地图展现
通过JAVAScript实现页面自适应
JavaScript学习笔记(6) 通过延迟触发使onDbClick时不触发onClick事件
很酷的超链接提示文字效果
Javascript 调用 Webservice ,处理返回的XML数据