JS+DIV+CSS实现仿表单下拉列表效果


Posted in Javascript onAugust 18, 2015

本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果。分享给大家供大家参考。具体如下:

JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多。

运行效果截图如下:

JS+DIV+CSS实现仿表单下拉列表效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS+JS仿下拉表单</title>
<script type="text/javascript" >
function $$$$$(_sId){
 return document.getElementById(_sId);
 }
function hide(_sId)
 {$$$$$(_sId).style.display = $$$$$(_sId).style.display == "none" ? "" : "none";}
function pick(v) {
 document.getElementById('am').value=v;
hide('HMF-1')
}
function bgcolor(id){
 document.getElementById(id).style.background="#F7FFFA";
 document.getElementById(id).style.color="#000";
}
function nocolor(id){
 document.getElementById(id).style.background="";
 document.getElementById(id).style.color="#788F72";
}
</script>
<style type="text/css">
*{margin:0px; padding:0px;}
body{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}
.cur{cursor:pointer; display:block;color:#788F72;width:146px; height:22px; line-height:22px; padding:0px 0px 0px 2px;}
.am{border: 0px;color:#788F72;cursor: pointer;background:#fff url('0.gif') no-repeat; width: 150px;height: 19px;margin:10px 0px 0px 10px; padding:3px 0px 0px 2px;}
.bm{border: 1px #999999 solid ;width: 148px; margin-left:10px;}
</style>
</head>
<body>
<form>
<input onclick="hide('HMF-1')" type="text" value="请选择" id="am" class="am" />
<div id="HMF-1" style="display: none " class="bm">
 <span id="a1" onclick="pick('ASP')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">ASP</span>
 <span id="a2" onclick="pick('PHP')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">PHP</span>
 <span id="a3" onclick="pick('JSP')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">JSP</span>
 <span id="a4" onclick="pick('ASP.NET')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">ASP.NET</span>
 <span id="a5" onclick="pick('JAVA')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">JAVA</span>
 <span id="a6" onclick="pick('DELPHI')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">DELPHI</span>
</div>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 #Javascript
js实现Select头像选择实时预览代码
Aug 17 #Javascript
基于jquery实现放大镜效果
Aug 17 #Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 #Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 #Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 #Javascript
js实现表单Radio切换效果的方法
Aug 17 #Javascript
You might like
php+mysql写的简单留言本实例代码
2008/07/25 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
JavaScript延迟加载
2021/03/09 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python列表与元组的异同详解
2019/07/02 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
高三自我鉴定范文
2013/10/19 职场文书
初中学生期末评语
2014/04/24 职场文书
理想演讲稿范文
2014/05/21 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
庆六一开幕词
2015/01/29 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技