zoukankan      html  css  js  c++  java
  • css配合js模拟的select下拉框

    css配合js模拟的select下拉框

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>无标题文档</title>
     6 <style>
     7 *{margin:0; padding:0;}
     8 a{text-decoration:none;}
     9 .selectBox{width:300px; height:30px; position:relative; border:#09F solid 1px; margin:100px auto;}
    10 .select_txt{width:100%; height:30px; font:14px/30px "Microsoft YaHei"; position:relative;}
    11 .txt{padding:0 10px; font-size:14px; font-weight:normal;}
    12 .sj{border-width:6px; border-color:#09F #FFFFFF #FFFFFF #FFFFFF; border-style:solid dashed dashed dashed; position:absolute; right:10px; top:12px; cursor:pointer;}
    13 .select{border:#09F solid 1px; overflow:hidden; width:300px; position:absolute; left:-1px; top:30px; display:none;}
    14 .select a{display:block; padding:0 10px; font:14px/2 "Microsoft YaHei";}
    15 .select a:hover{background:#09F; color:#FFF;}
    16 </style>
    17 </head>
    18 
    19 <body>
    20 <div class="selectBox">
    21         <div class="select_txt">
    22             <h3 class="txt" id="txt">文字部分</h3>
    23         <span class="sj" id="sj"></span>
    24     </div>
    25     <div class="select" id="select">
    26             <a href="javascript:;">首页</a>
    27             <a href="javascript:;">关于我们</a>
    28             <a href="javascript:;">联系我们</a>
    29             <a href="javascript:;">关于我们</a>
    30             <a href="javascript:;">联系我们</a>
    31             <a href="javascript:;">联系我们</a>
    32             <a href="javascript:;">联系我们</a>
    33             <a href="javascript:;">联系我们</a>
    34     </div>
    35 </div>
    36 <script>
    37 (function(){
    38         var oTxt = document.getElementById('txt');
    39         var oSj = document.getElementById('sj');
    40         var oSelect = document.getElementById('select');
    41         var aA = oSelect.getElementsByTagName('a');
    42         
    43         oSj.onclick = function(ev)
    44         {
    45                 var oEvent = ev || event;
    46                 oSelect.style.display = 'block';
    47                 
    48                 for(var i=0;i<aA.length;i++)
    49                 {
    50                         aA[i].onclick = function(ev)
    51                         {
    52                                 var oEvent = ev || event;
    53                                 oTxt.innerHTML = this.innerHTML;
    54                         }
    55                         
    56                 }
    57                 
    58                 oEvent.cancelBubble = true;
    59         }
    60         document.onclick = function(){oSelect.style.display = 'none';}
    61         
    62 })()
    63 </script>
    64 </body>
    65 </html>
  • 相关阅读:
    sqlserver游标使用误区
    工作笔记——sqlserver引号的运用
    疯狂JAVA——数组
    工厂模式、单例和多例
    数据库数据交互详解(一)
    2016-4-6
    2016-4-5 博问问题、答题和查看收获
    Maven+Spring Batch+Apache Commons VF学习
    你忽视的静态类的作用(必看)
    Wireshark抓包工具使用教程以及常用抓包规则
  • 原文地址:https://www.cnblogs.com/wxydigua/p/3414270.html
Copyright © 2011-2022 走看看