js实现带有介绍的Select列表菜单实例
作者：企鹅 发布时间：2024-04-19 10:26:22
标签：js,Select,列表,菜单
本文实例讲述了js实现带有介绍的Select列表菜单。分享给大家供大家参考。具体如下：
带有介绍的Select列表菜单特效代码，并不是导航菜单，这是表单中常用的下拉列表菜单，里面定义的菜单名称和链接都可以自己修改，不同的是添加了一个说明功能，鼠标点击列表中内容的时候，会浮动出本条内容的介绍，另外文本框内的内容也会跟着改变。
运行效果截图如下：
在线演示地址如下：
http://demo.aspxhome.com/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 = "https://www.aspxhome.com";} //改变本窗口的地址
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程序设计有所帮助。
0
投稿猜你喜欢
【原文地址】New "Orcas" Language Feature: Query Syntax 【原文发表日期】 Sa- image.jsp------------------------------生成随机验证码图片的Jsp页面 代码如下： <
- 问题：“深入认识Python内建类型”这部分的内容会从源码角度为大家介绍Python中各种常用的内建
- Python的Collections模块提供了不少好用的数据容器类型，其中一个精品当属namedtuple。namedtuple能够用来创建
- AES加密方式有五种：ECB, CBC, CTR, CFB, OFB从安全性角度推荐CBC加密方法，本文介绍了CBC,ECB两种加密方法的p
- 本文实例讲述了Python实现合并两个有序链表的方法。分享给大家供大家参考，具体如下：思路：先选出第一个节点，然后遍历两个链表，把小的作为当
- 为什么训练误差比测试误差高很多？一个Keras的模型有两个模式：训练模式和测试模式。一些正则机制，如Dropout，L1/L2正则项在测试模
- 模板在写动态页面的网站的时候，我们常常将不变的部分提出成为模板，可变部分通过后端程序的渲染来生成 * 页，golang提供了html/tem
- 开发目标：实现小红帽所挂脚本的自动生成下图为生成的最终目标本项目是从json中读取角色场景等信息，因此为了更好地判断所用属性是否需要，设置为
- 1. 引言FLOPs 是 floating point operations 的缩写，指浮点运算数，可以用来衡量模型/算法的计算复杂度。本文
- Python程序的注释感觉很不合群，对于习惯了使用/**/多行注释的人来说，到Python中只能使用#号进行单行注释很痛苦。# 这里是单行注
- 如下所示：#!/usr/bin/python# -*- coding: UTF-8 -*- import osimport shutilde
- 在这个周末刚刚写出来的python桌面应用--网络聊天室，主要通过pyqt5作为桌面应用框架，socket作为网络编程的框架，从而实现包括客
- 本文实例讲述了python实现支持目录FTP上传下载文件的方法。分享给大家供大家参考。具体如下：该程序支持ftp上传下载文件和目录、适用于w
- 本章节将为大家介绍Python循环语句的使用。Python中的循环语句有 for 和 while。Python循环语句的控制结构图如下所示：
- 网站改版，如何改?如果只是设计、功能和栏目等的稍微变动，这些很简单，从技术 上说并没有多少难度。只是对于网站本身的发展来说，没有多大的作用，
- 一、python对json的支持从python2.6开始，python标准库中添加了对json的支持，操作json时，只需要import j
- 测试：IE6、IE7、FF3.014突发奇想的效果，主要突出构思，效果还比较粗糙，好好创意一下，应该可以引申出一些比较有新意的图片切换效果。
- 当 Yii框架仍处于 RC（候选版）阶段时，我们 对它进行过报道，那时它刚刚全面达到候选版本阶段，（现在它已经发布了正式版本）我们感觉是时候
- 本文实例讲述了python生成器/yield协程/gevent写简单的图片下载器功能。分享给大家供大家参考，具体如下：1、生成器：'
