1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <style>
8 * {
9 margin: 0px;
10 padding: 0px;
11 list-style: none;
12 }
13
14 h2 {
15 margin-bottom: 20px;
16 background: #ccc;
17 display: inline-block;
18 }
19
20 h2 span {
21 background: blue;
22 display: inline-block;
23 width: 80px;
24 height: 40px;
25 text-align: center;
26 cursor: pointer;
27 }
28
29 div {
30 width: 600px;
31 height: 200px;
32 border: 2px solid blue;
33 overflow: hidden;
34 position: relative;
35 }
36
37 ul {
38 width: 600px;
39 position: absolute;
40 left: 0px;
41 transition: 0.2s linear;
42 }
43
44 ul li {
45 width: 200px;
46 height: 200px;
47 background: #eee;
48 float: left;
49 }
50
51 ul li:nth-child(even) {
52 background-color: green;
53 }
54
55 ul.sh {
56 display: block;
57 }
58
59 ul.hd {
60 display: none;
61 }
62
63 span.disable {
64 background: #ccc;
65 color: #eee;
66 cursor: default;
67 }
68 </style>
69 </head>
70
71 <body>
72
73 <section id="s1">
74
75 <h2><span>家电</span> | <span class="disable">手机</span> | <span class="disable">笔记本</span>| <span class="disable">西瓜</span> </h2>
76 <div>
77
78 <ul class="sh">
79 <li>家电</li>
80 <li>BB</li>
81 <li>CC</li>
82
83 </ul>
84 <ul class="hd">
85 <li>手机</li>
86 <li>EE</li>
87 <li>FF</li>
88 </ul>
89 <ul class="hd">
90 <li>笔记本</li>
91 <li>EE</li>
92 <li>FF</li>
93 </ul>
94 <ul class="hd">
95 <li>西瓜西瓜</li>
96 <li>EE</li>
97 <li>FF</li>
98 </ul>
99 </div>
100
101 </section>
102 <hr />
103
104 <section id="s2">
105
106 <h2><span>奶粉</span> | <span class="disable">奶油</span> | <span class="disable">奶酪</span> </h2>
107 <div>
108
109 <ul class="sh">
110 <li>奶粉</li>
111 <li>BB</li>
112 <li>CC</li>
113
114 </ul>
115 <ul class="hd">
116 <li>奶油</li>
117 <li>EE</li>
118 <li>FF</li>
119 </ul>
120 <ul class="hd">
121 <li>奶酪</li>
122 <li>EE</li>
123 <li>FF</li>
124 </ul>
125 </div>
126
127 </section>
128
129 <section id="s3">
130
131 <h2><span>箱包</span> | <span class="disable">香水</span> | <span class="disable">香料</span> </h2>
132 <div>
133
134 <ul class="sh">
135 <li>箱包</li>
136 <li>BB</li>
137 <li>CC</li>
138
139 </ul>
140 <ul class="hd">
141 <li>香水</li>
142 <li>EE</li>
143 <li>FF</li>
144 </ul>
145 <ul class="hd">
146 <li>香料</li>
147 <li>EE</li>
148 <li>FF</li>
149 </ul>
150 </div>
151
152 </section>
153 <script>
154 function SN(_id) {
155 var btn = document.querySelectorAll(_id + " span");
156 var uls = document.querySelectorAll(_id + " ul");
157
158 for(var i = 0; i < btn.length; i++) {
159 btn[i].index = i;
160 btn[i].onmouseover = function() {
161 ini()
162 //让当前选项卡亮色
163 this.className = ""
164 uls[this.index].className = "sh";
165 }
166 }
167
168 function ini() {
169 for(var i = 0; i < btn.length; i++) {
170 btn[i].className = "disable"
171 uls[i].className = "hd";
172 }
173 }
174 }
175
176 SN("#s1");
177 SN("#s2");
178 SN("#s3");
179 </script>
180 </body>
181
182 </html>
