这个代码的练习是点击事件后 如何用jQuery联动的方式找到相关标签

实现的结果是点击菜单一或者菜单二等 会出现相关菜品,并隐藏其他菜品.鼠标移动才菜品上会在右侧框内出现相关菜品的价格.实现特殊的效果.
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="jquery-3.2.1.js"></script>

     <style>

         *{

             margin: 0;

         }

         #left{

             float: left;

             font-size: 21px;

             height: 600px;

             color: brown;

             width: 25%;

         }

         #right{

             float: left;

             font-size: 40px;

             height: 600px;

             background-color: darkcyan;

             color: gold;

             width: 75%;

             text-align: center;

             line-height: 600px;

         }

         .menu1,.menu2,.menu3{

             background-color: #224ba2;

             height: 200px;

         }

         #left p{

             background-color: #276b8b;

             height: 58px;

             line-height: 60px;

             text-align: center;

             font-size: 20px;

             color: black;

         }

         .show p{

             display: none;

         }

         .show{

             display: none;

         }

         #no1{

             color: red;

         }

         #no2{

             color: #48f444;

         }

     </style>

 </head>

 <body>

     <div id="left">

         <div class="menu1" onclick="touch(this)">菜单一

             <div class="show" a="no1" onmouseover="money(this)">

                 <p>红 烧 鱼</p>

                 <p>啤 酒 鸭</p>

                 <p>土 豆 丝</p>

             </div>

         </div>

         <div class="menu2" onclick="touch(this)">菜单二

             <div class="show" a="no2" onmouseover="money(this)">

                 <p>螃  蟹</p>

                 <p>鱿  鱼</p>

                 <p>大  虾</p>

             </div>

         </div>

         <div class="menu3 " onclick="touch(this)">菜单三

             <div class="show" a="no3" onmouseover="money(this)">

                 <p>炒  面</p>

                 <p>炒  饭</p>

                 <p>混  沌</p>

             </div>

         </div>

     </div>

     <div id="right">

         <div id="no1" class="show">菜单1 --- 总价 $588$</div>

         <div id="no2" class="show">菜单2 ---总价 $888$</div>

         <div id="no3" class="show">菜单3 ---总价 $188$</div>

     </div>

 <script>

     function touch(ev) {

         $(ev).children("div").removeClass("show");          //首先要分析HTML表树 先找到 孩子里的DIV删除有show的属性

         $(ev).siblings("div").children("div").addClass("show"); // 然后找到同级的div下的div里加上show的css属性

     }

     function money(ev) {

         s=$(ev).attr("a");                                        //  拿到鼠标移动到事件的a属性值,

         $("#"+s).removeClass("show").siblings().addClass("show"); //  然后通过值找到相关的div标签 进行操作 删除SHOW的css

                                                                     //并且找到除了他自己的兄弟 都补充加上show的css

                                                                    //这个函数的关键是如何用属性的值来把2个不相干的地方给有效的联动起来

     }

 </script>

 </body>

 </html>

jQuery 菜单小练习(实现点击和移动鼠标效果)的更多相关文章

  1. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  2. jQuery拼图小游戏

    jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...

  3. 用jquery实现小火箭到页面顶部的效果

    恩,不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭,点击这个小火箭就可以慢慢回到页面顶部,闲的没事,自己搞了一下 需要引入jquery 代码和布局都很简单 <!DOCTYPE ...

  4. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  5. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  6. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  7. js+jquery+html实现在三种不通的情况下，点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  8. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  9. bootstrap中如何使input中的小图标获得点击事件

    bootstrap中,放入input中的小图标是不能点击的. 在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见. 要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层 ...

随机推荐

  1. SHTSC2017酱油记

    考完回来累成狗..睡了一觉..补游记.. DAY0 把最近刷的题发了下题解..NOIP RK10的蒟蒻收拾收拾准备退役了.. 12点就睡了..很久周五没这么早睡了.. DAY1 9点就醒了..莫名紧张 ...

  2. leecode刷题（7）-- 加一

    leecode刷题(7)-- 加一 加一 描述: 给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储一个数字. 你可以假设除了整数 ...

  3. [hadoop] map函数中使用FileSystem对象出现java.lang.NullPointerException的原因及解决办法

    问题描述: 在hadoop中处理多个文件,其中每个文件一个map. 我使用的方法为生成一个文件,文件中包含所有要压缩的文件在HDFS上的完整路径.每个map 任务获得一个路径名作为输入. 在eclip ...

  4. pg_basebackup命令解析

    pg_basebackup命令首先解析输入的参数,再调用BaseBackup()函数进行备份处理. 在BaseBackup()函数内部,会首先传送WAL日志(如果指定了-x选项的话).随后依次遍历所有 ...

  5. Ajax轮询 select循环输出

    弹出层 <include file="Pub:header"/> <style> .del{color:red} .addname{color:#337ab ...

  6. [JSOI2009]计数问题 二维树状数组BZOJ 1452

    题目描述 一个n*m的方格,初始时每个格子有一个整数权值.接下来每次有2种操作: 改变一个格子的权值: 求一个子矩阵中某种特定权值出现的个数. 输入输出格式 输入格式: 第一行有两个数N,M. 接下来 ...

  7. struts2学习笔记（六）—— 拦截器

    一.拦截器概述 拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前进行拦截,然后在之前或之后加入某些操作.拦截器是AOP的一种实现策略. 在We ...

  8. Android 系统特有的类介绍及使用

    1.Content类 在应用程序中Context的具体实现子类就是:Activity,Service,Application.可以把它理解成存储东西的仓库. 常用的上下文一般是类名.class或类名. ...

  9. 【算法笔记】B1015 德才论

    1015 德才论 (25 分) 宋代史学家司马光在<资治通鉴>中有一段著名的“德才论”:“是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不得圣人,君 ...

  10. HDU - 6186 前缀和位运算

    异或操作蒙蔽了我的双眼 以至于没有第一时间想到前缀和与后缀和 水题做的不够多 #include<bits/stdc++.h> #define rep(i,j,k) for(register ...