该js效果，单机我们的上边选项，下边会出现介绍，当我们点击前往时候，会跳转到相应的界面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>带有介绍的导航栏效果</title>
</head>
<body>
<h3>带有介绍的导航栏效果</h3>
<form name="stationform">
<select name="refsel" onchange="textValue()" multiple size="5">
<option title="提供免费的杀毒服务">360安全卫士</option>
<option title="百度一下">百度一下</option>
<option title="谷歌搜索">谷歌搜索</option>
<option title="网易">网易</option>
<option title="搜狐网">搜狐网</option>
<option title="新浪网">新浪网</option>
</select>
<p>
<input type="button" name="stationbutton" value="前往" onclick="herfto()">
</p>
<p>
<input type="text" name="stationtext" value="" size="30" maxlength="35" style="border: 1px solid red;">
</p>
</form>
<script type="text/javascript">
function herfto(){
if(document.stationform.refsel.options[0].selected)
{
window.location.href="http://www.360.cn";
}
else if(document.stationform.refsel.options[1].selected)
{
window.location.href="http://www.baidu.com";
}
else if(document.stationform.refsel.options[2].selected)
{
window.location.href="http://www.google.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.sohu.com";
}
else if(document.stationform.refsel.options[5].selected)
{
window.location.href="http://www.sina.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>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
