闂傚倷娴囬妴鈧柛瀣崌閺岀喖顢涘⿰鍐炬毉濡炪們鍎婚幏锟� (0) +1 闂備浇宕垫慨宥咁吋閸℃浼� (0) +1 闂傚倸鍊搁オ瀛樼閻戣棄绠柨鐕傛嫹 (0) +1
闂傚倷娴囬妴鈧柛瀣崌閺岀喖顢涘⿰鍐炬毉濡炪們鍎查崹鍧楀蓟閻旇 鍋撳☉娅亝鎱ㄩ崶褉鏀芥い鏇炴鐎氾拷闂傚倷绀侀幖顐ゆ偖椤愶箑纾块柛鎰嚋閼板潡鏌涘☉娆愮稇缂備讲鏅犻弻鐔碱敍濠婂喚鏆銈冨劵閹凤拷>>

正在阅读:Javascript实例教程(3) 创建折叠式导航菜单Javascript实例教程(3) 创建折叠式导航菜单

2004-02-14 09:33 出处:PConline 作者:ZSC 责任编辑:pjl
利用Javascript创建折叠式的导航菜单


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

<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="//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>

效果实现:

相关文章

关注我们

最新资讯离线随时看 聊天吐槽赢奖品
闂傚倷绀佺紞濠傖缚瑜旈、鏍幢濡炵粯鏁犻梺閫炲苯澧撮柟顔款潐閹峰懘宕ㄦ繝鍌欐樊婵犵妲呴崑鎾诲箯閿燂拷闂傚倷鐒﹂幃鍫曞磿閹惰棄纾绘繛鎴欏灩閺勩儵鎮橀悙鏉垮珟濞存粍绮撻弻娑㈩敃閿濆棛顦ラ梺鍛婃閹凤拷