事件例子（div做下拉列表）

最新推荐文章于 2023-03-14 14:55:17 发布

dizhuangla6673

最新推荐文章于 2023-03-14 14:55:17 发布

阅读量318

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nsl714745601/p/7049389.html

版权

<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" οnmοuseοver="bianse(this)" οnclick="dianji(this)">星期一</div>
   <div class="tian" οnmοuseοver="bianse(this)" οnclick="dianji(this)">星期二</div>
   <div class="tian" οnmοuseοver="bianse(this)" οnclick="dianji(this)">星期三</div>
   <div class="tian" οnmοuseοver="bianse(this)" οnclick="dianji(this)">星期四</div>
   <div class="tian" οnmοuseοver="bianse(this)" οnclick="dianji(this)">星期五</div>
   <div class="tian" οnmοuseοver="bianse(this)" οnclick="dianji(this)">星期六</div>
   <div class="tian" οnmοuseοver="bianse(this)" οnclick="dianji(this)">星期天</div>
   </div>




</body>

<script type="text/javascript">

//点击消失显示
  var riqi=document.getElementById("riqi")
  riqi.οnclick=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>

转载于:https://www.cnblogs.com/nsl714745601/p/7049389.html

dizhuangla6673

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件例子（div做下拉列表）

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>事件</title><style type="text/css">#riqi{ width:280px; height:50px;...
复制链接

扫一扫