DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js實現帶有介紹的Select列表菜單實例
js實現帶有介紹的Select列表菜單實例
編輯:關於JavaScript     

本文實例講述了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程序設計有所幫助。

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