自定义-js模仿下拉框效果资源-CSDN文库

共3个文件

html：1个

db：1个

gif：1个

5星 · 超过95%的资源需积分: 9 97 浏览量 2011-07-21 12:20:01 上传评论收藏 41KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

自定义-js模仿下拉框效果.rar （3个子文件）

自定义-js模仿下拉框效果

test.html 3KB

images

img-common.gif 16KB

Thumbs.db 68KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>test</title> <meta name="description" content="" /> <meta name="generator" content="Studio 3 http://aptana.com/" /> <meta name="author" content="lixuejian" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" />  <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="stylesheet" href="css/style-ys.css" /> <style type="text/css"> body,div,h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dd,p,table{ margin:0; padding: 0; font-weight: normal;} ul,li{ list-style-type: none;} body{ font-size:12px; line-height:20px;} /* select options */ #sel_list{position: relative; margin-left: 30px; margin-top:100px;} #sel_show{ width:95px; height:21px; background: url(images/img-common.gif) no-repeat -225px 0; text-indent:5px; cursor: default;} #sel_ul{ display: none; position:absolute; top:21px; border:#7aa8c8 solid 1px; border-top:0 none; width: 92px; line-height: 20px; background-color: #ffffff; z-index: 99;} #sel_ul li{ text-indent:5px; border-bottom:#bbd7f9 solid 1px; cursor: default; } #sel_ul li.active{ background-color: #b0d1f9;} </style> </head> <body> <div class="t_r" id="sel_list"> <div id="sel_show">语言选择</div> <ul id="sel_ul"> <li id="li_0">语言选择</li> <li id="li_1">简体中文</li> <li id="li_2">英文</li> </ul> <select id="sel" name="language" style="display:none;"> <option selected="selected">语言选择</option><option>简体中文</option><option>英文</option> </select> </div> <script type="text/javascript"> var obj =document.getElementById("sel_show"); var ul = document.getElementById("sel_ul"); var sel =document.getElementById("sel").getElementsByTagName("option"); var list,n; obj.onclick=function(){ ul.style.display = "block"; } function setSelected(){ list = ul.getElementsByTagName("li"); for(var k=0; k<list.length; k++){ list[k].onclick=function(){ obj.innerHTML=this.innerHTML; ul.style.display = "none"; n = this.id.split('_').pop(); //当前li的索引值 sel[n].selected="selected"; } list[k].onmouseover=function(){ this.className="active"; } list[k].onmouseout=function(){ this.className=""; } } } setSelected(); </script> </body> </html>

评论收藏

内容反馈