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

一、好友选中效果

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

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>

JavaScript事件与例子(三)的更多相关文章

  1. Javascript事件模型(三):JavaScript事件绑定方法总结(及Jquery)

    JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...

  2. JavaScript事件绑定的三种方式

    (一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...

  3. JavaScript事件与例子

    事件,就是预先设置好的一段代码,等到用户触发的时候执行. 一:常见的事件: 1.关于鼠标的事件 onclick 鼠标单击触发 ondblclick 鼠标双击触发 onmouseover 鼠标移上触发 ...

  4. Javascript 事件对象(三)事件冒泡

    事件流---事件冒泡取消冒泡:ev.cancelBubble=true ---事件捕获Ie下是没有的,在绑定事件中,标准下是有的 <!DOCTYPE HTML> <html> ...

  5. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  6. Javascript事件模型系列(一)事件及事件的三种模型

    一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...

  7. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

  8. c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合,找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理(完全指北)

    c#封装DBHelper类   public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...

  9. javaScript事件(三)事件对象

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 1.认识事件对象 事 ...

随机推荐

  1. 程序员要拥抱变化,聊聊Android即将支持的Java 8

    WeTest 导读 Java 9预计今年也会正式发布,Java 8这个最具变革性且变革性最适于GUI程序的版本,Android终于准备正式支持.从自己开发JavaFx的感受,说一说Java 8应该使用 ...

  2. 关于Java FTP SFTP的相关实际问题

    第一个: java ftp使用的是Apache common-net,但是FTP服务侧提供的FTP服务器只支持SFTP,结果报 java.net.ConnectException: Connectio ...

  3. 跨过Nginx上基于uWSGI部署Django项目的坑

    先说说他们的关系,Nginx和uWSGI都是Web服务器,Nginx负责静态内容,uWSGI负责Python这样的动态内容,二者配合共同提供Web服务以实现提高效率和负载均衡等目的.uWSGI实现了多 ...

  4. 关于使用JavaScript实现图片点击切换(附带改变导航图片 方案二)

    具体需求见方案一. 这种方案相比方案一更加专业. <!DOCTYPE html> <html> <head lang="en"> <met ...

  5. c# post basic 接口

    string url = "http://xxxxxxxxx";//地址,请反复检查地址的准确性 string usernamePassword = "username: ...

  6. Python初识文本基本操作

    初识文本的基本操作 怎么在文件里面写内容和都内容 文件操作过程 1,找到文件 文件路径 2,打开文件 file_obj=file(文件路径,模式) 3,文件操作,读写文件 file_obj.read( ...

  7. 取消关联svn

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN] @= ...

  8. git学习笔记之二 -- git分支

    前面对git基础作了简单的总结,这次对git的杀手锏--分支做一总结. Git分支简介 几乎每个版本控制系统都以某种形式支持分支,可以使你的工作从开发主线上分离开来,以免影响开发主线.很多版本控制系统 ...

  9. XSS攻击及预防

    跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者往Web页面里插 ...

  10. elasticsearch系列(三)分表分库

    首先ES没有库和表的概念,只有index,type,document(详细术语可以看ES的系列一 http://www.cnblogs.com/ulysses-you/p/6736926.html), ...