<!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. Android HTTPS(5)SSL测试工具

    Nogotofail: A Network Traffic Security Testing Tool Nogotofail is a tool gives you an easy way to co ...

  2. NDK(11)Android.mk编译APK模板

    转自 :  http://hubingforever.blog.163.com/blog/static/1710405792011656434982/ 以下仅是使用Android.mk编译APK程序的 ...

  3. Hosting Your Own NuGet Feeds

    Hosting Your Own NuGet Feeds Hosting the NuGet Gallery Locally in IIS https://github.com/NuGet/NuGet ...

  4. 【干货】国外程序员整理的 C++ 资源大全

    关于 C++ 框架.库和资源的一些汇总列表,由 fffaraz发起和维护. 内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++ Standard ...

  5. Machine Learning for hackers读书笔记(八)PCA：构建股票市场指数

    library('ggplot2') prices <- read.csv('G:\\dataguru\\ML_for_Hackers\\ML_for_Hackers-master\\08-PC ...

  6. UVa 10020 (最小区间覆盖) Minimal coverage

    题意: 数轴上有n个闭区间[ai, bi],选择尽量少的区间覆盖一条指定线段[0, m] 算法: [start, end]为已经覆盖到的区间 这是一道贪心 把各个区间先按照左端点从小到大排序,更新st ...

  7. Asp.Net验证码1

    验证码html调用 验证码:<input name="> <img src="CodeHandler.ashx" id="imgCode&qu ...

  8. context-param引发spring容器以及servlet容器的关联

    转自:http://blog.csdn.net/liaoxiaohua1981/article/details/6759206 格式定义: [html] view plaincopy <cont ...

  9. (转)Mac OS X写了个rm时将文件放入回收站的小工具

    上次由于公司里机器要面临重装,开始仓皇地将Mac本里的文件scp到我的台式机上.忙乱之中本来要删除一个无用的文件夹的,结果用rm -rf的时候tab了一下,补全出来的文件都没看清就按下了回车,毫无疑问 ...

  10. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...