每天一个javascript特效之动态导航菜单

首先来看下JS效果:

效果功能:选择下拉列表中的值单击搜索一下,便可跳转到相应的网站。

JS思路分析:取出select中选中的option的值,将其赋值给window.open(值),即可

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>动态导航菜单</title>

<style type="text/css">

 #menu{

   margin:0 auto;

   text-align:center;

   top:100px;

  }

  #menu select{

   width:100px;

   height:20px;

  }

</style>

<script type="text/javascript">

 window.onload=function()

 {

    

	var objBtn=document.getElementById("go");//取得button按钮

	var objUrl=document.getElementById("url");//取得select对象

	var objOptions=objUrl.getElementsByTagName("option");//取得所有的option数组

	objBtn.onclick=go;

	function go()

	{

	   for(var i=0;i<objOptions.length;i++)

	   {

	      if(objOptions[i].selected==true)

		  {

		    var value=objOptions[i].value; //得到选中的值

			//alert(value);

			window.open(value);//跳转到选中的页面

		  }

	   }

	}

 }

 

</script>

</head>

<body>

<div id="menu">

  站内搜索

  <select id="url" size="1">

   <option value="http://www.baidu.com/" />百度

   <option value="http://www.sina.com.cn/" />雅虎

   <option value="http://www.163.com/" />网易

   <option value="http://hao.360.cn/" />360

  </select>

  <input type="button" value="搜索一下" id="go" />

</div>

</body>

</html>

 

重点记忆:

 上述代码中:

<select id="url" size="1">
   <option value="http://www.baidu.com/" />百度
   <option value="http://www.sina.com.cn/" />雅虎
   <option value="http://www.163.com/" />网易
   <option value="http://hao.360.cn/" />360
  </select>

 第一个要记住的便是select中的size属性,该值表示在列表框中能同时看到的列表项中的数目,size="1"表示同时只能看到一个,如果size="2"表示可以同时看到两个。

第二个要记住的便是每个option的value属性,该值不会显示出来主要用于存放重要信息。

第三个要记住的便是option的selected标记,如果为true则为选中状态,如果为false则为未选中状态。可用于判断某个option是否被选中。

你可能感兴趣的:(JavaScript)