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>
  • 相关阅读:
    【转】理清基本的git(github)流程
    GIT CHEAT SHEET
    failed to push some refs to 'git@github.com:*/learngit.git'
    catch(…) vs catch(CException *)?
    char[]与TCHAR[]互相转换引发的一个问题!
    关于 AfxSocketInit()
    href="#"与href="javascript:void(0)"的区别
    Camera帧率和AE的关系(转)
    详细的摄像头模组工作原理!!!(转)
    高清摄像头MIPI接口与ARM处理器的连接(转)
  • 原文地址:https://www.cnblogs.com/wxydigua/p/3414270.html
Copyright © 2011-2022 走看看