<!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. [HDOJ1171]Big Event in HDU（01背包）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1171 许多有价值的物品,有重复.问如何将他们分成两堆,使两堆价值之差最小. 对价值求和,转换成01背包 ...

  2. 使用Gradle构建android应用

    介绍: 由于Android Studio使用的构建工具是Gradle,所以如果Eclipse和Android Studio想互相构建彼此的应用,必须使用Gradle. Gradle 是以 Groovy ...

  3. [Android教程]EditText设置/隐藏光标位置、选中文本和获取/清除焦点

      有时候需要让光标显示在EditText的指定位置或者选中某些文本.同样,为了方便用户输入以提升用户体验,可能需要使EditText获得或失去焦点. 1. 设置光标到指定位置 EditText et ...

  4. WCF常见异常-The maximum string content length quota (8192) has been exceeded while reading XML data

    异常信息:The maximum string content length quota (8192) has been exceeded while reading XML data 问题:调用第三 ...

  5. UVa 10361 Automatic Poetry

    Automatic Poetry Input: standard input Output: standard output Time Limit: 2 seconds Memory Limit: 3 ...

  6. HDU 2064 (递推) 汉诺塔III

    将柱子从左到右依次编号为A.B.C 设将n个盘子从一端移动到另一端的最少步数为f(n) 则f(n)和f(n-1)的递推关系为:f(n) = 3 × f(n-1) + 2 初始状态A柱子上面有n个盘子, ...

  7. HDU 2059 龟兔赛跑

    受上一道题影响,我本来想着开一个二维数组来表示充电和不充电的状态. 可这样就有一个问题,如果没有充电,那么在下一个阶段就有剩余的电量. 这样问题貌似就不可解了,难道是因为不满足动态规划的无后效性这一条 ...

  8. BZOJ 3306 树

    dfs序建线段树+分类讨论+写的有点长. #include<iostream> #include<cstdio> #include<cstring> #includ ...

  9. UVA 11354 Bond 邦德 （RMQ，最小瓶颈MST）

    题意: n个城市,m条路,每条路有个危险值,要使得从s走到t的危险值最小.回答q个询问,每个询问有s和t,要求输出从s到t最小的危险值.(5万个点,10万条边) 思路: 其实要求的是任意点对之间的最小 ...

  10. ecshop 模版商品详情页,不同商品调用不同模板

    1.在goods.php中找到以下代码 $smarty->display('goods.dwt', $cache_id); 改为下面的代码 switch ($goods['cat_id']){ ...