你的位置:首页 > 软件开发 > Java > javascript模拟select下拉菜单

javascript模拟select下拉菜单

发布时间:2015-07-21 13:00:05
javascript模拟select下拉菜单:由于自带的select下拉菜单确实是不够美观,并且美化的潜力也不够大,所以对外观要求比较高的网站,基本都要使用自定义的select下拉菜单,下面就提供了一个简单的例子供大家参考,代码实例如下:<!DOCTYPE html> ...

javascript模拟select下拉菜单:

由于自带的select下拉菜单确实是不够美观,并且美化的潜力也不够大,所以对外观要求比较高的网站,基本都要使用自定义的select下拉菜单,下面就提供了一个简单的例子供大家参考,代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title></head><style>*{ margin:0; padding:0;}li{ list-style:none;}body{ font:12px "宋体"; color:#666;}.select_down{ margin:100px auto; position:relative; width:600px; min-height:200px; height:auto!important; height:200px; border:1px solid #ccc; padding:20px; border-radius:8px}.select_down dt{ float:left; width:134px; position:relative; margin-right:5px; display:inline;}.select_down h3{ color:#919191; font-size:12px; font-weight:normal; border:1px solid #e5e5e5; height:18px; background:#fbfbfb; line-height:18px; text-indent:8px;}.select_down ul{ width:132px; border:1px solid #e5e5e5; background:#fbfbfb; position:absolute; top:18px; left:0; z-index:1; text-indent:8px; display:none;}.select_down ul li{ height:22px; line-height:22px; cursor:pointer;}.select_down ul li.hover{ background:#f2f2f2;}.select_down dt a{ position:absolute; width:18px; height:18px; top:1px; right:1px;}</style><script type="text/javascript">window.onload=function(){ var oflink = document.getElementById('sel'); var aDt = oflink.getElementsByTagName('dt'); var aUl = oflink.getElementsByTagName('ul'); var aH3= oflink.getElementsByTagName('h3');   for(var i=0;i<aDt.length;i++){  aDt[i].index = i;  aDt[i].onclick = function(ev){   var ev = ev || window.event;   for(var i=0;i<aUl.length;i++){    aUl[i].style.display = 'none';   }         aUl[this.index].style.display = 'block';   document.onclick = function(){    aUl[This.index].style.display = 'none';   };   ev.cancelBubble = true;  }; } for(var i=0;i<aUl.length;i++){  aUl[i].index = i;  (function(ul){   var iLi = ul.getElementsByTagName('li');   for(var i=0;i<iLi.length;i++){    iLi[i].onmouseover = function(){     this.className = 'hover';    };    iLi[i].onmouseout = function(){     this.className = '';    };    iLi[i].onclick = function(ev){     var ev = ev || window.event;     aH3[this.parentNode.index].innerHTML = this.innerHTML;     ev.cancelBubble = true;     this.parentNode.style.display = 'none';    };   }  })(aUl[i]); }}</script><body><div class="select_down" id="sel"> <dl>  <dt>   <h3>select选择</h3>   <ul>    <li>蚂蚁部落一</li>    <li>蚂蚁部落二</li>    <li>蚂蚁部落三</li>   </ul>  </dt> </dl> <dl>  <dt>   <h3>select选择</h3>   <ul>    <li>蚂蚁部落一</li>    <li>蚂蚁部落二</li>    <li>蚂蚁部落三</li>   </ul>  </dt> </dl></div></body></html>

原标题:javascript模拟select下拉菜单

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。