DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript實例教程(2) 創建折疊式導航菜單
Javascript實例教程(2) 創建折疊式導航菜單
編輯:關於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="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>


 


 


 

效果實現:






XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved