jQuery 菜单小练习(实现点击和移动鼠标效果)

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

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

 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>