【实例名称】
下拉框式网站导航代码
【实例描述】
本例的导航并不是菜单,而是对网站中各个模块的描述。用户可以通过下拉列表框,了解网站中各个模块的功能。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-本站(www.xue51.com)</title> <SCRIPT LANGUAGE="JavaScript"> var messages = new Array(6); //显示的信息数组 messages[0] = ""; messages[1] = "这里查询所有的健康咨询,学习如何保护自己的身体,如何正确饮食!"; messages[2] = "是刚注册的用户吗?还不知道如何浏览本站吧,从这里进入即可!"; messages[3] = "要下载常用软件吗/本站的某些页面打不开吗?从这里进去看看!"; messages[4] = "不管你有什么想说的,都可以来这里发泄! "; messages[5] = "这里有所有资深会员的经验之谈,近来看看吧!"; function messageReveal() { var messageindex = document.messageForm.messagePick.selectedIndex //获取用户选择的列表索引 document.messageForm.messageField.value = messages[messageindex]; //显示指定的信息 } </SCRIPT> </head> <body> <form name="messageForm"> <select name="messagePick" OnChange="messageReveal()"> <option value="0">网站导航条 <option>健康杂谈 <option>新用户帮助 <option>下载软件 <option>灌水论坛 <option>老手经验 </select> <br><p> <textarea name="messageField" rows=6 cols=50 wrap=virtual></textarea> </form> </body> </html>
【运行效果】
【难点剖析】
本例的重点是select标签的应用。select使用下拉框显示一组数据,通过索引访问数据中的元素。其“selectedIndex”属性用来表示用户选中的索引,本例通过该属性获取数组中指定的提示信息。
【源码下载】
本实例JS代码下载
……