您的位置：首页 > Web前端 > JavaScript

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

2013-04-18 19:49 716 查看
首先来看下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是否被选中。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航