JavaScript事件与例子（三）

两个例子，好友选中效果和左侧右侧子菜单

一、好友选中效果

可以通过设置属性的方式判断当前是否被选中，也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中，从而进行操作

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>