<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件</title>
<style type="text/css">
#riqi{ 280px;
height:50px;
border:1px solid #F00;
margin-top:100px;
margin-left:300px;
padding-left:20px;
line-height:50px;
vertical-align:middle;
}
#list{ 300px;
height:350px;
border:1px solid #0FF;
margin-left:300px;
}
.tian{ 280px;
height:49px;
border-bottom:1px solid #0F6;
line-height:50px;
vertical-align:middle;
padding-left:20px;
}
</style>
</head>
<body>
<div id="riqi"></div>
<div id="list" style="display:none">
<div class="tian" onmouseover="bianse(this)" onclick="dianji(this)">星期一</div>
<div class="tian" onmouseover="bianse(this)" onclick="dianji(this)">星期二</div>
<div class="tian" onmouseover="bianse(this)" onclick="dianji(this)">星期三</div>
<div class="tian" onmouseover="bianse(this)" onclick="dianji(this)">星期四</div>
<div class="tian" onmouseover="bianse(this)" onclick="dianji(this)">星期五</div>
<div class="tian" onmouseover="bianse(this)" onclick="dianji(this)">星期六</div>
<div class="tian" onmouseover="bianse(this)" onclick="dianji(this)">星期天</div>
</div>
</body>
<script type="text/javascript">
//点击消失显示
var riqi=document.getElementById("riqi")
riqi.onclick=function(){
var a=document.getElementById("list")
if( a.style.display=="none"){
a.style.display="block"
}else{ a.style.display="none"}
}
//变色
function bianse(b){
var sy = document.getElementsByClassName("tian");
for (var i=0;i<sy.length;i++){
sy[i].style.backgroundColor = "white";
sy[i].style.color = "black";
}
b.style.backgroundColor = "red";
b.style.color = "yellow";
}
//选中
function dianji(c){
document.getElementById("list").style.display="none";
document.getElementById("riqi").innerText=c.innerText;
}
</script>
