首頁 > web前端 > js教程 > 主體

js實作帶有介紹的Select列表選單實例_javascript技巧

WBOY
發布: 2016-05-16 15:44:27
原創
1364 人瀏覽過

本文實例講述了js實作帶有介紹的Select列表選單。分享給大家供大家參考。具體如下:

附有介紹的Select清單選單特效程式碼,並不是導覽選單,這是表單中常用的下拉清單選單,裡面定義的選單名稱和連結都可以自己修改,不同的是增加了一個說明功能,滑鼠點選清單中內容的時候,會浮動出本條內容的介紹,另外文字方塊內的內容也會跟著改變。

運作效果截圖如下:

線上示範網址如下:

http://demo.jb51.net/js/2015/js-info-select-menu-codes/

具體程式碼如下:

<html>
<head>
<title>带有说明的导航栏</title>
</head>
<body>
<script language="JavaScript"> 
<!--
function herfto(){
  if (document.stationform.refsel.options[0].selected){ //根据用户选定的项目
    window.location.href = "http://www.jb51.net";} //改变本窗口的地址
  else if (document.stationform.refsel.options[1].selected)
  {  window.location.href = "http://www.sina.com.cn";}
  else if (document.stationform.refsel.options[2].selected)    
  {  window.location.href = "http://www.sohu.com";} 
  else if (document.stationform.refsel.options[3].selected)    
  {  window.location.href = "http://www.163.com";} 
  else if (document.stationform.refsel.options[4].selected)    
  {  window.location.href = "http://www.5dcentury.com";} 
  else if (document.stationform.refsel.options[5].selected)    
  {  window.location.href = "http://www.chinaren.com";}  
  else if (document.stationform.refsel.options[6].selected)    
  {  window.location.href = "http://cn.yahoo.com";} 
 //根据可选条目,这里应该相应的增减。
  return true; 
  }
function textValue(){ 
  var stationInteger, stationString  
  stationInteger=document.stationform.refsel.selectedIndex //取得选定项目的编号
  stationString=document.stationform.refsel.options[stationInteger].title //根据编号取得相应说明
  document.stationform.stationtext.value = stationString } //将说明显示出来
//-->
</script>
<form name="stationform">
<select name="refsel" onChange="textValue()" multiple size="5">
<option title="一个提供优质脚本代码的网站">脚本之家
<option title="相当不错的虚拟社区">新浪sina
<option title="不用说,要搜索来这里就对了">搜狐
<option title="提供免费个人主页空间">网易163
<option title="一个优秀的学生网站">世纪学苑
<option title="首创同学录,中国学生的聚会场所">中国人
<option title="世界闻名的搜索巨头">雅虎yahoo
</select>
<p>
<input type="button" name="stationbutton" value="Go!" onClick="herfto()" 
style="background-color: #FFFFFF; border: 1 solid #000000">
<p><input type="text" name="stationtext" value="" size="30" maxlength="35" style="border: 1 solid #000000">
</form>
</body>
</html>
登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板