当前位置:首页 > 网页特效 > 表格图层 >

Js CSS随手模拟的select下拉选择框

时间:2014-03-21 08:37 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • JavaScript 与CSS共同模拟实现的Select下拉框,选择值以后自动显示,但这种样式要比网页中固有的Select更灵活,可以很好的美化,喜欢的就拿去自己美化一下,整体很不错的。
  • <title>JS css模仿select</title>
    <style>
    .zselect{width:500px;height:50px;line-height:50px;border:1px solid #ccc;position: relative;}
    .zselect ul{width:100%;list-style: none;margin: 0px;padding: 0px;position: absolute;z-index: 999;border: 1px solid #ccc;background: #fff;}
    .zselect ul li{width:100%;height:50px;line-height:50px;text-align:center;margin: 2px 0px;background: #CCC; display: none; cursor: pointer;}
    .zselect ul li:hover{background: #666;}
    .zselect ul li.on{display: block; }
    </style>
    <div class="zselect">
    <ul>
    <li class="on">请选择编程语言</li>
    <li>Visual C#</li>
    <li>Visual Basic</li>
    <li>PHP</li>
    <li>Foxpro</li>
    <li>易语言</li>
    </ul>
    </div>
    <script>
    var lis = document.getElementsByClassName('zselect')[0].getElementsByTagName('li');
    for(var i = 0; i < lis.length; i++){
    lis[i].onclick = function(){
    if(this.parentNode.getAttribute('_zxs') == 'show'){
    //for(var j = 0; j < lis.length; j++){ lis[j].className = '';}
    for(var j = 0; j < lis.length; j++){ lis[j].style.display = 'none';}
    this.className = 'on';
    this.style.display = 'block';
    this.parentNode.setAttribute('_zxs','hide');
    }else{
    //for(var j = 0; j < lis.length; j++){ lis[j].className = 'on';}
    for(var j = 0; j < lis.length; j++){ lis[j].style.display = 'block';}
    this.parentNode.setAttribute('_zxs','show');
    }
    };
    }
    </script>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-biaoge/7012.html

表格图层下载排行

最新文章