<!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 { width: 250px; height: 20px; border: 1px solid #fe6601; padding: 5px; line-height:20px; margin: 20px auto 0 auto;}

#ul1 { margin: 0 auto; width: 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>

dom select选单的更多相关文章

  1. 浏览器端-W3School-HTML：HTML DOM Select 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Select 对象 1.返回顶部 1. HTML DOM Select 对象 Select 对象 Select 对象代表 HTM ...

  2. HTML DOM select() 方法

    定义和用法 select() 方法用于选择该元素中的文本. 语法 textareaObject.select() 实例 下面的例子可选择文本框中的文本: <html> <head&g ...

  3. HTML DOM Select 对象

    Select 对象 Select 对象代表 HTML 表单中的一个下拉列表. 在 HTML 表单中,<select> 标签每出现一次,一个 Select 对象就会被创建. 您可通过遍历表单 ...

  4. 当select框变化时 获取select框中被选中的值

    DOM <select name="course"> <option value="1">1</option> <op ...

  5. 【AngularJs】---实现select的ng-options

    controller .controller('MainController', function($scope, $http, $ionicModal, $timeout) { var post = ...

  6. JS & DOM 对象

    22:36 2013/6/4 详情参照W3C文档标准 Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Loca ...

  7. javascript DOM对象转jquery对象

    首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...

  8. [Cycle.js] From toy DOM Driver to real DOM Driver

    This lessons shows how we are able to easily swap our toy DOM Driver with the actual Cycle.js DOM Dr ...

  9. 可以添加自定义的Select控件

    1.控件dom <select name="WebSiteTarget" id="WebSiteTarget" class="w1" ...

随机推荐

  1. linux常用头文件及说明

    linux常用头文件及说明 1. Linux中一些头文件的作用: <assert.h>:ANSI C.提供断言,assert(表达式)<glib.h>:GCC.GTK,GNOM ...

  2. 安装SQL2008的时候 出现System.Configuration.ConfigurationErrorsException: 创建 userSettings/Microsoft.SqlServe

    System.Configuration.ConfigurationErrorsException: 创建 userSettings/Microsoft.SqlServer.Configuration ...

  3. Qt之HTTP上传/下载

    简述 在前面章节中我们讲述了关于Qt显示网络图片的内容,比较简单,因为图片一般都比较小,下载到本地速度比较快,所以基本不需要什么特殊处理,本节我们主要针对HTTP实现上传/下载进行详细的讲解与分享,包 ...

  4. NuGet的安装;

        下载完毕安装需要重启一下VS 然后我们去NuGet里面安装我们要的客户端 搜索  CouchbaseNetClient   引用之后,编译项目,查看到已引用的dll文件

  5. notebook kernels

    http://10.139.97.132/user/8e6ef01ea71d3f988e61bf2db17c3031/api/kernels [{"id": "f0987 ...

  6. 【英语】Bingo口语笔记(17) - 表示“感谢/不用客气“

  7. T-SQL备忘(2)：聚合函数运算和NULL

    我们看表的数据: 而select AVG(Age) from Member1的结果为27.自己算一下就知道136/6 =22.666.而不是27,因此知道实际上Age为NULL的行没有参与运算.即: ...

  8. sql loader

    vi append.sh #!/bin/bash sqlldr userid=bm_weihu/itms_xianwan control=input2.ctl vi input2.ctl LOAD D ...

  9. Linux下ps命令

    简述 Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,动态的显示进程信息 ...

  10. activity_main.xml与fragment_main.xml

    见: http://blog.sina.com.cn/s/blog_3e28c8a50101fqvw.html http://blog.sina.com.cn/s/blog_3e28c8a50101f ...