<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
margin:0px auto;}
#dd{
300px;
height:40px;
border:1px solid #999;
text-align:center;
line-height:40px;
vertical-align:middle;
}
.xiang{
300px;
height:40px;
border:1px solid #999;
background-color:#0FF;
text-align:center;
line-height:40px;
vertical-align:middle;
display:none;
}
.xiang:hover{
color:#fff;
background-color:red}
</style>
</head>
<body>
<div id="pp">
<div id="dd" onclick="Xian()"></div>
<div class="xiang" onclick="Xuan(this)">北京</div>
<div class="xiang" onclick="Xuan(this)">北京66</div>
<div class="xiang" onclick="Xuan(this)">北京66666</div>
<div id="dd_1"></div>
</div>
</body>
<script type="text/javascript">
function Xian()
{
var div = document.getElementsByClassName("xiang");
for(var i=0;i<div.length;i++)
{
div[i].style.display = "block";
}
}
function Xuan(a)
{
//var nr = a.innerHTML;
document.getElementById("dd").innerHTML = a.innerHTML;
var xiang = document.getElementsByClassName("xiang");
for(var i=0;i<xiang.length;i++)
{
xiang[i].style.display = "none";
}
}
</script>
</html>
这样就可以找到每个事件所单击找的对应值。