这个代码的练习是点击事件后 如何用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>