教程集 > 脚本编程 > javascript > 正文 div仿select效果

div仿select效果

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供div仿select效果等资源，欢迎您收藏本站，我们将为您提供最新的div仿select效果资源

提示：您可以先修改部分代码再运行

<style type="text/css">  div{  	padding:0px;  	font-size:12px;  }  #mainbox{  	width:224px;  }  #box0{  	width:200px;  	height:20px;  	border:1px solid green;  	float:left;  	padding-top:2px;  	padding-left:2px;  }  #box1{  	width:20px;  	height:20px;  	cursor:pointer;  	border:1px solid green;  	float:left;  	text-align:center;  	padding-top:2px;  }  #items{  	border:1px solid black;  	width:220px;  	display:none;  }  #box3{  	width:218px;  	/*border-bottom:1px solid green;  	border-left:1px solid green;  	border-right:1px solid green;	  */  	padding-left:4px;  }  .over{  	background-color:#11586E;  	font-weight:bold;  	color:#FFF;  	/*border-top:1px dotted black;  	border-bottom:1px dotted black;*/  	cursor:pointer;  }  p{  	font-size:12px;  	color:activeCaption;  	font-weight:bold;  }  </style>  <script type="text/javascript" defer>  var oDiv0=document.getElementById("box0");  var oDiv1=document.getElementById("box1");  var oDiv=document.getElementById("items");  oDiv1.onclick=function(){  oDiv.style.display=oDiv.style.display=="block"?"none":"block";  show();  }  function hide(obj){  var obj=obj;  obj.parentNode.style.display="none";  }  function show(){  for(var i=0;i<oDiv.childNodes.length;i  ){  oDiv.childNodes[i].onmouseover=function(){  this.className="over";  }  oDiv.childNodes[i].onmouseout=function(){  this.className="";  }  oDiv.childNodes[i].onclick=function(){  oDiv0.innerHTML=this.innerHTML;  hide(this);  if(oDiv0.innerText.indexOf("vincent")!=-1){  window.open("http://www.111cn.net/vincent","","");  }  }  }  }  </script>  <body>  <p>用div改编select--options</p>  <div id="mainbox">  <div id="box0"></div><div id="box1">↓</div>  <div id="items" style="">  	<div id="box3">湖北</div>  	<div id="box3">武汉</div>  	<div id="box3">孝感</div>  	<div id="box3">枝江</div>  	<div id="box3">汉川</div>  	<div id="box3">还有</div>  	<div id="box3">http://www.111cn.net/vincent</div>  </div>  </div>    </body>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
photoshop模仿建筑景观蓝图效果制作教程
 photoshop把图片转为模仿建筑景观蓝图效果教程
 photoshop模仿在雪地上写出来的划痕文字效果制作教程
 photoshop打造梦幻紫色仿手绘非主流效果
 仿人才网的二级联动菜单效果实例
 javascript 仿Flash图片幻灯切换效果
 PS把人物美女照片仿手绘教程
 Photoshop结合SAI制作漫画风格照片仿手绘效果处理教程
 Photoshop模仿墙上的立体LOGO文字制作教程
 仿网易的新浪网站滑门效果，用DIV CSS技术实现

上一篇：js树形菜单_树形菜单代码下一篇：只能输入数和中文

[关闭]

最近更新

浏览排行

~ ~