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