zoukankan      html  css  js  c++  java
  • dom select选单

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    body { margin: 0; padding: 0; }
    ul { padding: 0; margin: 0; }
    li { list-style: none; }
    a { text-decoration: none; color: #000; display: block; }
    #div1 {  250px; height: 20px; border: 1px solid #fe6601; padding: 5px; line-height:20px; margin: 20px auto 0 auto;}
    #ul1 { margin: 0 auto;  260px; line-height: 20px; border: 1px solid #fe6601; display: none;}
    #ul1 li a { padding: 5px; }
    #ul1 li a:hover { background: #fe6601; color: #fff; }
    </style>
    <script type="text/javascript">
    window.onload = function ()
    {
        var odiv = document.getElementById('div1');
        var oul = document.getElementById('ul1');
        var arr = [];
        
        odiv.onclick = function (ev)
        {
            var ev = ev || event;
            oul.style.display = 'block';
            ev.cancelBubble = true;
        }
        
        for(var i = 0; i < oul.children.length; i++ )
        {
            oul.children[i].onclick = function ()
            {
                for(var i = 0; i < oul.children.length; i++ )
                {
                    oul.children[i].children[0].style.background = '';
                    oul.children[i].children[0].style.color = '';
                }
                odiv.innerHTML = this.children[0].innerHTML;
                this.children[0].style.background = '#fe6601';
                this.children[0].style.color = '#fff';
            }
        }
        
        document.onclick = function ()
        {
            oul.style.display = 'none';
            arr = [];
        }
        
    };
    </script>
    </head>
    
    <body>
        <div id="div1"></div>
        <ul id="ul1">
            <li><a href="javascript:;">宋体</a></li>
            <li><a href="javascript:;">黑体</a></li>
            <li><a href="javascript:;">楷体</a></li>
            <li><a href="javascript:;">微软雅黑</a></li>
            <li><a href="javascript:;">新宋体</a></li>
            <li><a href="javascript:;">仿宋</a></li>
        </ul>
    </body>
    </html>
  • 相关阅读:
    ::selection
    为什么要web语义化
    label的for属性与inputde的id元素绑定
    a 标签
    IE6 双倍距BUG
    css样式书写顺序
    清除浮动 .clearfix
    Unity利用AnimationCurve做物体的各种运动
    Error: unknown argument: '-websockets'
    关闭VAX的拼写检查_解决中文红色警告问题
  • 原文地址:https://www.cnblogs.com/mayufo/p/4224393.html
Copyright © 2011-2022 走看看