JS DIV CSS implements form-like drop-down list effect_javascript skills-JS Tutorial-php.cn

JS DIV CSS implements form-like drop-down list effect_javascript skills

WBOY

Release： 2016-05-16 15:44:28

Original

1083 people have browsed it

The example in this article describes the JS DIV CSS implementation of a form-like drop-down list effect. Share it with everyone for your reference. The details are as follows:

JS DIV CSS implements a form-like drop-down list effect. It is an effect achieved completely using CSS technology and combined with JS. It is used to replace the traditional Select drop-down box. Although at present, this code is still a bit rough, but it is useful for beautifying the list. In terms of style, it may be more convenient in the future, much more convenient than Select.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-div-css-fselect-codes/

The specific code is as follows:

<!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" &#63; "" : "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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.