两个例子,好友选中效果和左侧右侧子菜单
一、好友选中效果
可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,从而进行操作
1.通过设置属性的方式判断选中的元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>好友选中</title> <style> *{ margin:0px auto; padding:0px; } #wai{ height:400px; width:200px; margin-top:100px; margin-left:100px; } .li{ height:30px; width:200px; background-color:blue; border:1px solid white; text-align:center; line-height:30px; vertical-align:middle;} </style> </head> <body> <div id="wai"> <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">风吹柳叶遮黄雀</div> <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">薄翅不觉已落蝉</div> <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">谁将新樽辞旧月</div> <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">今月曾今朝故人</div> </div> </body> </html> <script> //首先获取到所有好友列表 var l=document.getElementsByClassName("li"); //鼠标单击事件 function xuan(b){ //遍历数组,设置属性ys的值为0,颜色为蓝 for(var i=0;i<l.length;i++){ l[i].setAttribute("ys","0"); l[i].style.backgroundColor="blue"; } //当前元素ys属性值为1,颜色为红 b.setAttribute("ys","1"); b.style.backgroundColor="red"; } //鼠标移上的效果 function bian(a){ //遍历数组内容,只要ys属性的值是0,颜色变为蓝色 for(var i=0;i<l.length;i++){ if(l[i].getAttribute("ys")=="0"){ l[i].style.backgroundColor="blue"; } } //获取当前元素ys属性值如为0,则颜色变为绿 if(a.getAttribute("ys")=="0"){ a.style.backgroundColor="green"; } } //鼠标离开事件 function li(c){ //如果当前元素ys值为0,颜色设为蓝色 if(c.getAttribute("ys")=="0"){ c.style.backgroundColor="blue"; } } </script>
2.通过获取当前元素颜色的方式判断
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>好友选中</title> <style> *{ margin:0px auto; } #wai{ margin-top:100px; margin-left:100px; width:300px; height:300px;} .li{ margin:1px; background-color:white; font-family:微软雅黑; font-size:16px; text-align:center; width:300px; height:50px; line-height:50px; vertical-align:middle; float:left;} </style> </head> <body> <div id="wai"> <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">风吹柳叶遮黄雀</div> <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">薄翅不觉已落蝉</div> <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">谁将新樽辞旧月</div> <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">今月曾经照古人</div> </div> </body> </html> <script> //之前曾经用给每个div加id,然后函数传回id的方式,错误,因为这样函数写在div传回自己的用this,如果函数传回的是下面的div的改变,可以尝试用加div //获取所有列表好友到数组 var z=document.getElementsByClassName('li'); //鼠标移上的效果 function yishang(s){ //遍历数组,判断每个颜色是绿色即移上状态,则颜色设为白色即初始颜色,如果颜色是蓝色即选中状态,则跳出本次循环颜色依旧为蓝色 for(i=0;i<z.length;i++){ if(z[i].style.backgroundColor=="green"){ z[i].style.backgroundColor="white"; }else if(z[i].style.backgroundColor=="blue"){ //跳出本次循环 continue; } //在判断当前元素颜色是否是蓝色即被选中状态,是则跳出即状态不变,否则颜色设为绿色即鼠标移上的效果 if(s.style.backgroundColor=="blue"){ continue; }else{ s.style.backgroundColor="green"; } /* 此方法原本作为对上面方法的优化,可以直接判断现在的颜色如果是白色,则变为绿色,该方法的漏洞在于,当前没有颜色可以获取 如果使用该方法,应当在元素中内联颜色 if(s.style.backgroundColor=="white"){ s.style.backgroundColor="green"; }e*/ } } //鼠标单击事件,鼠标单击首先将所有元素设置为初始白色,然后当前颜色设为蓝色 function dianJi(y){ for(i=0;i<z.length;i++){ z[i].style.backgroundColor="white"; } y.style.backgroundColor="blue"; } //鼠标离开事件,鼠标离开如果颜色是绿色即未被选中,则变为白色 function zou(z){ if(z.style.backgroundColor=="green"){ z.style.backgroundColor="white"; } } </script>
使用这种方法,为何能够获取到当前元素颜色进行判断?首先鼠标移上,执行函数 yishang(),然后进for循环遍历进行判断,不符合判断任何一种情况,则无操作,进行下一个判断,如果当前元素颜色是被选中状态则跳出,如果不是则设为绿色,第一个颜色就这样赋值上了
这个问题我出错的几点需要注意:
1.在函数中,什么时候用数组元素的样式,什么时候用当前元素的样式多次搞错
2.判断中判断样式是否是该颜色,一定要用==
二、左侧右侧子菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>子菜单</title> <style> *{ margin:0px auto; padding:0px;} #wai{ margin-top:150px; margin-left:200px; height:300px; width:100px;} .li{ height:30px; width:100px; background-color:#0FF; line-height:30px; vertical-align:middle; text-align:center; border:1px solid white; } .li1{ height:30px; width:100px; background-color:#0F0; line-height:30px; vertical-align:middle; text-align:center; border:1px solid white; } .li:hover{ background-color:#FF3; } .li1:hover{ background-color:#FF3; } </style> </head> <body> <div id="wai"> <div class="li" onclick="show('cp')">产品中心</div> <div class="liw" id="cp" style="display:none"> <div class="li1">休闲</div> <div class="li1">百货</div> </div> <div class="li" onclick="show('dt')">最新动态</div> <div class="liw" id="dt" style="display:none"> <div class="li1">公司动态</div> <div class="li1">业界新闻</div> </div> <div class="li">关于我们</div> <div class="li">联系我们</div> </div> </body> </html> <script> //单击事件 function show(id){ //获取所有子菜单到数组,获取当前元素 var s=document.getElementsByClassName("liw"); var a=document.getElementById(id); //判断里注意用== //如果当前元素隐藏则显示,否则隐藏 if(a.style.display=="none"){ a.style.display="block"; }else{ a.style.display="none"; } } </script>