1.                 这个代码的练习是点击事件后 如何用jQuery联动的方式找到相关标签
  3. 实现的结果是点击菜单一或者菜单二等 会出现相关菜品,并隐藏其他菜品.鼠标移动才菜品上会在右侧框内出现相关菜品的价格.实现特殊的效果.
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <script src="jquery-3.2.1.js"></script>
  7.      <style>
  8.          *{
  9.              margin: 0;
  10.          }
  11.          #left{
  12.              float: left;
  13.              font-size: 21px;
  14.              height: 600px;
  15.              color: brown;
  16.              width: 25%;
  17.          }
  18.          #right{
  19.              float: left;
  20.              font-size: 40px;
  21.              height: 600px;
  22.              background-color: darkcyan;
  23.              color: gold;
  24.              width: 75%;
  25.              text-align: center;
  26.              line-height: 600px;
  27.          }
  28.          .menu1,.menu2,.menu3{
  29.              background-color: #224ba2;
  30.              height: 200px;
  31.          }
  32.          #left p{
  33.              background-color: #276b8b;
  34.              height: 58px;
  35.              line-height: 60px;
  36.              text-align: center;
  37.              font-size: 20px;
  38.              color: black;
  39.          }
  40.          .show p{
  41.              display: none;
  42.          }
  43.          .show{
  44.              display: none;
  45.          }
  46.          #no1{
  47.              color: red;
  48.          }
  49.          #no2{
  50.              color: #48f444;
  51.          }
  52.      </style>
  53.  </head>
  54.  <body>
  55.      <div id="left">
  56.          <div class="menu1" onclick="touch(this)">菜单一
  57.              <div class="show" a="no1" onmouseover="money(this)">
  58.                  <p>红 烧 鱼</p>
  59.                  <p>啤 酒 鸭</p>
  60.                  <p>土 豆 丝</p>
  61.              </div>
  62.          </div>
  63.          <div class="menu2" onclick="touch(this)">菜单二
  64.              <div class="show" a="no2" onmouseover="money(this)">
  65.                  <p>螃  蟹</p>
  66.                  <p>鱿  鱼</p>
  67.                  <p>大  虾</p>
  68.              </div>
  69.          </div>
  70.          <div class="menu3 " onclick="touch(this)">菜单三
  71.              <div class="show" a="no3" onmouseover="money(this)">
  72.                  <p>炒  面</p>
  73.                  <p>炒  饭</p>
  74.                  <p>混  沌</p>
  75.              </div>
  76.          </div>
  77.      </div>
  78.  
  79.      <div id="right">
  80.          <div id="no1" class="show">菜单1 --- 总价 $588$</div>
  81.          <div id="no2" class="show">菜单2 ---总价 $888$</div>
  82.          <div id="no3" class="show">菜单3 ---总价 $188$</div>
  83.      </div>
  84.  <script>
  85.      function touch(ev) {
  86.          $(ev).children("div").removeClass("show");          //首先要分析HTML表树 先找到 孩子里的DIV删除有show的属性
  87.          $(ev).siblings("div").children("div").addClass("show"); // 然后找到同级的div下的div里加上show的css属性
  88.  
  89.      }
  90.      function money(ev) {
  91.          s=$(ev).attr("a");                                        //  拿到鼠标移动到事件的a属性值,
  92.          $("#"+s).removeClass("show").siblings().addClass("show"); //  然后通过值找到相关的div标签 进行操作 删除SHOW的css
  93.                                                                      //并且找到除了他自己的兄弟 都补充加上show的css
  94.                                                                     //这个函数的关键是如何用属性的值来把2个不相干的地方给有效的联动起来
  95.      }
  96.  </script>
  97.  </body>
  98.  </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. JavaScript中创建自定义对象的方法

    本文内容参考JavaScript高级程序设计(第3版)第6章:面向对象的程序设计 ECMA-262中把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”我所理解的就是对象就是一个结构 ...

  2. 【10.2.3】ArcGIS Runtime for Android搭建开发环境过程中问题具体解释

    一.Visual Studio Ultimate2012安装过程问题 1.问题描写叙述 安装完毕后,您将看到一条消息,指示安装程序已完毕.但并非全部的功能具有已正确安装.以及下面警告消息: Micro ...

  3. python测试笔试题1

    哪一个方法用来返回变量类型? 答案 type 哪一个方法用来列出一个类下的所有属性,方法,以及变量? 答案 dir 字符串方法format是用来去掉字符串的左右空格的么? 答案 不是 python 的 ...

  4. [SinGuLaRiTy] 2017 百度之星程序设计大赛 初赛A

    [SinGuLaRiTy-1036] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 小C的倍数问题 Time Limit: 2000/100 ...

  5. 深度学习之 TensorFlow（五）：mnist 的 Alexnet 实现

    尝试用 Alexnet 来构建一个网络模型,并使用 mnist 数据查看训练结果. 我们将代码实现分为三个过程,加载数据.定义网络模型.训练数据和评估模型. 实现代码如下: #-*- coding:u ...

  6. 八大排序算法的python实现（八）简单选择排序

    代码: #coding:utf-8 #author:徐卜灵 # L = [6, 3, 2, 32, 5, 4] def Select_sort(L): for i in range(0,len(L)) ...

  7. JavaScript学习笔记——2.数据类型与类型转换

    数据类型 JS中一共分成六种数据类型 1- String 字符串 2- Number 数值 3- Boolean 布尔值 4- Null 空值 5- Undefined 未定义 6- Object 对 ...

  8. 如何理解<base href="<%=basePath%>" ---转载

    原文链接http://316325524.blog.163.com/blog/static/6652052320111118111620897/ "base href " 今天在写 ...

  9. MySQL5.7配置（第一次使用）

    MySQL5.7配置(第一次使用) 最近因为工作需要学习mysql的增删改查.用的公司的电脑,之前有人已经安装过mysql5.7,等于使用了免安装版,重新开始配置.参考了以下文章 http://blo ...

  10. 9.tab栏切换

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...