<!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;

        ev.cancelBubble = true;

        oul.style.display = 'block';

    }

    for( var i = 0; i < oul.children.length; i++)

    {

        oul.children[i].onclick = function (ev)

        {

            var ev = ev || event;

            if(ev.shiftKey)

            {

                ev.cancelBubble = 'true';

            }

            for(var i = 0; i < arr.length; i++)

            {

                if(this.children[0].innerHTML == arr[i])

                {

                    arr.splice(i,1);

                    odiv.innerHTML = arr.join(',');

                    bgcolor();

                    return;

                }

            }

            arr.push ( this.children[0].innerHTML);

            odiv.innerHTML = arr.join(',');

            bgcolor();

            function bgcolor ()

            {

                for(var i = 0; i < oul.children.length; i++)

                {

                    oul.children[i].children[0].style.background = '';

                    oul.children[i].children[0].style.color = '';

                }

                var arr1 = odiv.innerHTML.split(',');

                for(var i = 0; i < arr1.length; i++)

                {

                    for(var j = 0; j < oul.children.length ; j++)

                    {

                        if(oul.children[j].children[0].innerHTML == arr1[i])

                        {

                            oul.children[j].children[0].style.background = '#fe6601';

                            oul.children[j].children[0].style.color = '#fff';

                        }

                    }

                }

            }

        }

    }

    document.onclick = function ()

    {

        oul.style.display = 'none';

        arr = [];

    }

};

</script>

</head>

<body>

    <div id="div1">按住shift多</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 按着shift多选的更多相关文章

  1. Element中Tree树结构组件中实现Ctrl和Shift多选

    在Element中的树结构中, 实现多选功能,首先的是判断有没有按下键盘ctrl和shift按键.但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的.所以就需要在函 ...

  2. element穿梭框el-transfer增加拖拽排序和shift多选checkbox功能

    <template> <div class="demo"> <el-transfer v-model="value" filter ...

  3. 在html页，使用ctrl，shift多选表格行

    前段时间,项目中遇到这样一个需求.需要在页面中像windows资源管理器中一样可以使用ctrl和shift键来多选. <html> <head> <style> b ...

  4. jquery VS Dom(小实例单选-多选-反选)

    一直以来大家对jquery评价莫过于六个字 “吃得少,干的多” ,应用实例让大家看看这款牛到爆的插件能帮我们做什么,话不多说,直接加码 <!DOCTYPE html> <html l ...

  5. DOM（十）使用DOM设置单选按钮、复选框、下拉菜单

    1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...

  6. easyui datagrid shift 多选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  7. 按住CTRL多选，按住shift连选的实现

    <tr class="address" v-for="(counts, index) in counts" :key="index" ...

  8. DOM表单（复选框）

    在表单中,尤为重要的一个属性是name <!--复选框的全选.全不选.反选--> <!DOCTYPE> <html> <head lang="en& ...

  9. DOM操作案例之--全选与反选

    全选与反选在表单类的项目中还是很常见的,电商项目中的购物车一定少不了这个功能. 下面我只就用一个简单的案例做个演示吧. <div class="wrap"> <t ...

随机推荐

  1. 无锁编程(六) - seqlock(顺序锁)

    seqlock(顺序锁) 用于能够区分读与写的场合,并且是读操作很多.写操作很少,写操作的优先权大于读操作. seqlock的实现思路是,用一个递增的整型数表示sequence.写操作进入临界区时,s ...

  2. ViewPager的监听事件失效

    主要是因为在我项目使用了PageIndicator,所以这个时候监听事件要写在PageIndicator上. mIndicator.setOnPageChangeListener(new OnPage ...

  3. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  4. 用Visio画UML顺序图

    1.顺序图 顺序图又称为时序图,顾名思义,它着重表现的是对象间消息传递的时间顺序.顺序图描述的对象也是一个用例,即一组行为操作,而它表现的是这组行为的先后关系(纵坐标),以及每个行为是属于哪个对象的( ...

  5. UVa 1593 (水题 STL) Alignment of Code

    话说STL的I/O流用的还真不多,就着这道题熟练一下. 用了两个新函数: cout << std::setw(width[j]);    这个是设置输出宽度的,但是默认是在右侧补充空格 所 ...

  6. UVa 10815 Andy's First Dictionary

    感觉这道题要比之前几个字符串处理的题目难度要大了一些. 题目大意:给若干行字符串,提取出所有单词并去掉重复的,最后按字典顺序输出. 对于输入大致有两种思路,一种是逐个读入字符,遇到字母的话就放到wor ...

  7. Asp.Net保存session的三种方法

    C#中保存Session的三种方法及Web.Config设置 1.保存session到sql server,需要指定Sql Server服务器,这种方法因为要读写数据库最慢 <sessionSt ...

  8. ubuntu搭建DNS

    ubuntu搭建DNS 一.     bind简介: BIND是Domain Name System (DNS) 协议的一个实现,提供了DNS主要功能的开放实现,主要包括以下三种: *域名服务器 *D ...

  9. IOS中导航控制器的代理及隐藏控制器刚出现时的滚动条

    一.导航控制器的代理 1.UINavigationController的delegate属性 2.代理方法 1> 即将显示新控制器时调用 /* navigationController : 导航 ...

  10. JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)

    继承的其他形式: •类式继承:利用构造函数(类)继承的方式 •原型继承:借助原型来实现对象继承对象   类 : JS是没有类的概念的 , 把JS中的构造函数看做的类 要做属性和方法继承的时候,要分开继 ...