<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件</title>
<style type="text/css">
#riqi{ width:280px;
       height:50px;
	   border:1px solid #F00;
	   margin-top:100px;
	   margin-left:300px;
	   padding-left:20px;
	   line-height:50px;
	   vertical-align:middle;
	   }
#list{ width:300px;
       height:350px;
	   border:1px solid #0FF;
	   margin-left:300px;
	   }
.tian{ width: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>