首页 > 代码库 > dom 按着shift多选
dom 按着shift多选
<!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多选
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。