<!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. 【Android】MTK Android 编译命令

    命令格式:./maketek [option] [project] [action] [modules] Option: -t ,-tee :输出log信息到当前终端 -o , -opt=-- : 编 ...

  2. 短地址TinyURL的API使用

    TinyURL的短地址服务超过10年了,很稳定,官方没有给出API连接,其实很简单: API: 调用:http://tinyurl.com/api-create.php?url=http://URL, ...

  3. HTML & CSS 小总结

    1. web 主机代理商 web hosting company, 让他们的服务器为你的页面服务2. 选择网站名字 例如: www.1234.com3. 寻找 把文件从电脑传到主机的途径4. 把新网站 ...

  4. URAL1091. Tmutarakan Exams(容斥)

    1091 容斥原理 #include <iostream> #include<cstdio> #include<cstring> #include<algor ...

  5. WP7应用版本升级的实现方法

    首先必须要有一个服务提供升级推送查询 // Code to execute when the application is launching (eg, from Start)         //  ...

  6. WebForm页面生命周期及asp.net运行机制

    1.先上几张原理图着重理解: 现在针对第四副图原理进行解析: 流程: 1.浏览器发送请求 2.服务器软件(IIS)接收,它最终的目的就是为了向客户输出它请求的动态页面生成的html代码. 3.服务器不 ...

  7. qt多文档

    http://blog.csdn.net/siren0203/article/details/5661541

  8. ECSHOP 商品评论条件修改——购买过该商品且只能评价一次(购买多少次能评价多少次)

    下文转自http://bbs.ecshop.com/thread-1131529-1-1.html ECSHOP 商品评论条件修改,修改为购买过该商品多少次,就只能评价多少次.不需要修改数据库,原理简 ...

  9. 正则表达式 java版

    众所周知,在程序开发中,难免会遇到需要匹配.查找.替换.判断字符串的情况发生,而这些情况有时又比较复杂,如果用纯编码方式解决,往往会浪费程序员的时间及精力.因此,学习及使用正则表达式,便成了解决这一矛 ...

  10. Github托管代码步骤

    总结一下Github上项目托管步骤: Step 1:注册Github帐号,并创建一个repository,假如仓库名为test: Step 2:安装本地Git: sudo apt-get instal ...