您的位置：首页 > Web前端 > CSS

DIV+CSS+JS下拉列表s实例

2012-12-22 19:58 405 查看


[html] view
plaincopy

<!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: 98px;

height: 22px;

line-height: 22px;

padding: 0px 0px 0px 2px;

}

.am {

border: 0px;

font-size:20px;

color: #788F72;

cursor: pointer;

background: #fff url('0.gif') no-repeat;

width: 102px;

height: 19px;

margin: 10px 0px 0px 10px;

padding: 3px 0px 0px 2px;

}

.bm {

border: 1px #999999 solid;

font-size:20px;

width: 100px;

margin-left: 10px;

}

</style>

</head>

<body>

<form>

<table align="center">

<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('北京市')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">北京市</span>

<span id="a2" onclick="pick('山东省')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">山东省</span>

<span id="a3" onclick="pick('陕西省')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">陕西省</span>

<span id="a4" onclick="pick('河北省')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">河北省</span>

<span id="a5" onclick="pick('河南省')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">河南省</span>

<span id="a6" onclick="pick('江苏省')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">江苏省</span>

</div>

</table>

</form>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航