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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我就是马云飞

View的绘制流程源码分析

概述 View的绘制流程主要是指测量、布局以及绘制显示,在View中,measure是测量View的宽高,layout是控制View四个顶点的位置,而draw就...

20950
来自专栏Golang语言社区

Golang的iota问题

通常人们认为iota就是0,其实并非如此。 确切的说,当iota在紧跟着关键字const的第一行出现时,iota为0,在第二行出现时,iota为1,以此类推;当...

405110
来自专栏coding for love

CSS入门5-选择器

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

9530
来自专栏cnblogs

CSS3新特性应用之结构与布局

一、自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,...

23190
来自专栏Windows Community

New UWP Community Toolkit - RadialProgressBar

概述 UWP Community Toolkit  中有一个圆形的进度条控件 - RadialProgressBar,本篇我们结合代码详细讲解  RadialP...

402100
来自专栏一“技”之长

Java开发GUI之滚动条 原

7800
来自专栏HTML5学堂

详析获取标签

在前几期的文章当中,我们学习了JS的基础语法,它是我们学习其它知识点的重要前提。小编也与大家分享了JS逻辑与DOM的相结合,并带着大家去实现了一些简单的页面交互...

33290
来自专栏用户2442861的专栏

css display table-cell

display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

34210
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

42420
来自专栏向治洪

微信小程序基本组件概述

为了更好的理解微信小程序,本文90%文字描述来源于官网的介绍。官网原链接https://mp.weixin.qq.com/debug/wxadoc/dev/co...

220100

扫码关注云+社区

领取腾讯云代金券