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 相关文章推荐
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
canvas 实现中国象棋
Feb 17 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
关于js类的定义
2011/06/28 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
调试Python程序代码的几种方法总结
2015/04/28 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
在Python中表示一个对象的方法
2019/06/25 Python
python文字转语音的实例代码分析
2019/11/12 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
python绘制分布折线图的示例
2020/09/24 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
如何选择使用结构还是类
2014/05/30 面试题
LINUX下线程,GDI类的解释
2012/04/17 面试题
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
redis复制有可能碰到的问题汇总
2022/04/03 Redis