1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>无标题文档</title>
6 <script type="text/javascript">
7 window.onload = function ()
8 {
9 var otabnav = document.getElementById('tabnav');
10 var ali = otabnav.getElementsByTagName('li');
11
12
13 var ocontent = document.getElementById('content');
14 var aul = ocontent.getElementsByTagName('ul');
15
16 function fntab(num)
17 {
18 for(var i = 0 ;i < ali.length; i++)
19 {
20 ali[i].className = '';
21 aul[i].className = '';
22 }
23 ali[num].className = 'active';
24 aul[num].className = 'show';
25 };
26
27 for( var i = 0; i < ali.length; i++ )
28 {
29 ali[i].index = i;
30 ali[i].onclick = function ()
31 {
32 num = this.index;
33 fntab(num);
34 };
35 }
36
37 for( var i = 0; i < aul.length; i++ )
38 {
39
40 hover(aul[i]);
41 };
42
43 function hover(ul)
44 {
45 var aali = ul.getElementsByTagName('li');
46 for( var i = 0; i < aali.length; i++ )
47 {
48 aali[i].onmouseover = function ()
49 {
50
51 this.getElementsByTagName('a')[0].style.display = 'none';
52 this.getElementsByTagName('div')[0].style.display = 'block';
53 };
54
55 aali[i].onmouseout = function ()
56 {
57 this.getElementsByTagName('div')[0].style.display = 'none';
58 this.getElementsByTagName('a')[0].style.display = 'block';
59 };
60 }
61 };
62 };
63 </script>
64 <style>
65 *{
66 margin:0px;
67 padding:0px;
68 }
69 a{
70 text-decoration:none;
71 color:#333;
72 }
73 #wrap{
74 background:#DEE7E7;
75 width:267px;
76 overflow:hidden;
77 padding-left:5px;
78 padding-right:8px;
79 }
80 #wrap h2{
81 color:#003;
82 font-size:18px;
83 height:40px;
84 line-height:40px;
85 border-bottom:1px solid #B4CFDD;
86 float:left;
87 padding-left:13px;
88 padding-right:43px;
89 }
90
91 #tabnav{
92 margin-top:13px;
93 overflow:hidden;
94 }
95
96 #tabnav li{
97 float:left;
98 font-size:12px;
99 cursor:pointer;
100 color:#497790;
101 height:24px;
102 line-height:24px;
103 padding:0 6px;
104 border-width:1px 0 1px 1px;
105 border-style:solid none solid solid;
106 border-color:#B4CFDD;
107 }
108
109 #wrap ul li {
110 display:inline-block;
111 }
112 .show{
113 display:block !important;
114 }
115 .hide{
116 display:none !important;
117 }
118 .active{
119 background:white;
120 font-weight:bold;
121 }
122
123 #day,#week,#all{
124 display:none;
125 }
126
127 #content ul li{
128 line-height:28px;
129 font-size:12px;
130 position:relative;
131 border-bottom:1px dashed white;
132 cursor:pointer;
133 width:270px;
134 }
135 #content ul li span{
136 position:absolute;
137 height:15px;
138 width:15px;
139 line-height:15px;
140 text-align:center;
141 background:#1A68A2;
142 color:white;
143 font-size:8px;
144 font-weight:bold;
145 left:6px;
146 top:6px;
147 }
148 #content ul li a{
149 margin-left:37px;
150 }
151 #content div {
152 height:82px;
153 background:white;
154 overflow:hidden;
155 display:none;
156 }
157 #content div img{
158 height:70px;
159 width:70px;
160 border:1px solid #000;
161 margin:6px 6px 6px 30px;
162 float:left;
163 }
164 #content div p{
165 float:left;
166 width:150px;
167 padding-top:10px;
168 line-height:16px;
169 }
170 #content div a{
171 position:absolute;
172 background:#1A68A2;
173 right:5px;
174 bottom:5px;
175 padding:0px 5px;
176 color:#FFF;
177
178 }
179
180 </style>
181 </head>
182
183 <body>
184 <div id="wrap">
185 <h2>观看排行榜</h2>
186 <ul id="tabnav">
187 <li class="active">每日</li>
188 <li>每周</li>
189 <li style="border-right:1px solid #B4CFDD ">全部</li>
190 </ul>
191 <div id="content">
192 <ul id='day' class="show">
193 <li>
194 <span>1</span>
195 <a href="#" onclick = "javascript:">解密：关于地球与人类的一千零一问</a>
196 <div>
197 <img src="img/pen.png" alt="pen">
198 <p>
199 解密：关于地球与人类的一千零一问
200 </p>
201 <a href="#">播放</a>
202 </div>
203 </li>
204 <li>
205 <span>2</span>
206 <a href="#" onclick = "javascript:">经典传奇：探索全世界重大历史事件</a>
207 <div>
208 <img src="img/pen.png" alt="pen">
209 <p>
210 解密：关于地球与人类的一千零一问
211 </p>
212 <a href="#">播放</a>
213 </div>
214 </li>
215 <li>
216 <span>3</span>
217 <a href="#" onclick = "javascript:">眼界：展现普通人的曲折命运和动人...</a>
218 <div>
219 <img src="img/pen.png" alt="pen">
220 <p>
221 解密：关于地球与人类的一千零一问
222 </p>
223 <a href="#">播放</a>
224 </div>
225 </li>
226 <li>
227 <span>4</span>
228 <a href="#" onclick = "javascript:">档案（BTV）：惊人事件和传奇背...</a>
229 <div>
230 <img src="img/pen.png" alt="pen">
231 <p>
232 解密：关于地球与人类的一千零一问
233 </p>
234 <a href="#">播放</a>
235 </div>
236 </li>
237 <li>
238 <span>5</span>
239 <a href="#" onclick = "javascript:">世界十最：30个震惊世界的Top...</a>
240 <div>
241 <img src="img/pen.png" alt="pen">
242 <p>
243 解密：关于地球与人类的一千零一问
244 </p>
245 <a href="#">播放</a>
246 </div>
247 </li>
248 <li>
249 <span>6</span>
250 <a href="#" onclick = "javascript:">身边的：警卫员解密秘...</a>
251 <div>
252 <img src="img/pen.png" alt="pen">
253 <p>
254 解密：关于地球与人类的一千零一问
255 </p>
256 <a href="#">播放</a>
257 </div>
258 </li>
259 <li>
260 <span>7</span>
261 <a href="#" onclick = "javascript:">新电影传奇：每一步电影都有自己的...</a>
262 <div>
263 <img src="img/pen.png" alt="pen">
264 <p>
265 解密：关于地球与人类的一千零一问
266 </p>
267 <a href="#">播放</a>
268 </div>
269 </li>
270 <li>
271 <span>8</span>
272 <a href="#" onclick = "javascript:">档案（上视纪实频道）：解密档案中...</a>
273 <div>
274 <img src="img/pen.png" alt="pen">
275 <p>
276 解密：关于地球与人类的一千零一问
277 </p>
278 <a href="#">播放</a>
279 </div>
280 </li>
281 <li>
282 <span>9</span>
283 <a href="#" onclick = "javascript:">探寻传世国宝的千古传奇</a>
284 <div>
285 <img src="img/pen.png" alt="pen">
286 <p>
287 解密：关于地球与人类的一千零一问
288 </p>
289 <a href="#">播放</a>
290 </div>
291 </li>
292 <li>
293 <span>10</span>
294 <a href="#" onclick = "javascript:">纪实系列：讲述社会百态，透视事实...</a>
295 <div>
296 <img src="img/pen.png" alt="pen">
297 <p>
298 解密：关于地球与人类的一千零一问
299 </p>
300 <a href="#">播放</a>
301 </div>
302 </li>
303 <span>
304 <a href="#">更多>></a>
305 </span>
306 </ul>
307 <ul id="week" >
308 <li>
309 <span>1</span>
310 <a href="#" onclick = "javascript:">每月：关于地球与人类的一千零一问</a>
311 <div>
312 <img src="img/pen.png" alt="pen">
313 <p>
314 解密：关于地球与人类的一千零一问
315 </p>
316 <a href="#">播放</a>
317 </div>
318 </li>
319 <li>
320 <span>2</span>
321 <a href="#" onclick = "javascript:">每月传奇：探索全世界重大历史事件</a>
322 <div>
323 <img src="img/pen.png" alt="pen">
324 <p>
325 解密：关于地球与人类的一千零一问
326 </p>
327 <a href="#">播放</a>
328 </div>
329 </li>
330 <li>
331 <span>3</span>
332 <a href="#" onclick = "javascript:">每月：展现普通人的曲折命运和动人...</a>
333 <div>
334 <img src="img/pen.png" alt="pen">
335 <p>
336 解密：关于地球与人类的一千零一问
337 </p>
338 <a href="#">播放</a>
339 </div>
340 </li>
341 <li>
342 <span>4</span>
343 <a href="#" onclick = "javascript:">每月（BTV）：惊人事件和传奇背...</a>
344 <div>
345 <img src="img/pen.png" alt="pen">
346 <p>
347 解密：关于地球与人类的一千零一问
348 </p>
349 <a href="#">播放</a>
350 </div>
351 </li>
352 <li>
353 <span>5</span>
354 <a href="#" onclick = "javascript:">每月十最：30个震惊世界的Top...</a>
355 <div>
356 <img src="img/pen.png" alt="pen">
357 <p>
358 解密：关于地球与人类的一千零一问
359 </p>
360 <a href="#">播放</a>
361 </div>
362 </li>
363 <li>
364 <span>6</span>
365 <a href="#" onclick = "javascript:">每月的毛：警卫员解密毛秘...</a>
366 <div>
367 <img src="img/pen.png" alt="pen">
368 <p>
369 解密：关于地球与人类的一千零一问
370 </p>
371 <a href="#">播放</a>
372 </div>
373 </li>
374 <li>
375 <span>7</span>
376 <a href="#" onclick = "javascript:">每月影传奇：每一步电影都有自己的...</a>
377 <div>
378 <img src="img/pen.png" alt="pen">
379 <p>
380 解密：关于地球与人类的一千零一问
381 </p>
382 <a href="#">播放</a>
383 </div>
384 </li>
385 <li>
386 <span>8</span>
387 <a href="#" onclick = "javascript:">每月（上视纪实频道）：解密档案中...</a>
388 <div>
389 <img src="img/pen.png" alt="pen">
390 <p>
391 解密：关于地球与人类的一千零一问
392 </p>
393 <a href="#">播放</a>
394 </div>
395 </li>
396 <li>
397 <span>9</span>
398 <a href="#" onclick = "javascript:">每月传世国宝的千古传奇</a>
399 <div>
400 <img src="img/pen.png" alt="pen">
401 <p>
402 解密：关于地球与人类的一千零一问
403 </p>
404 <a href="#">播放</a>
405 </div>
406 </li>
407 <li>
408 <span>10</span>
409 <a href="#" onclick = "javascript:">每月系列：讲述社会百态，透视事实...</a>
410 <div>
411 <img src="img/pen.png" alt="pen">
412 <p>
413 解密：关于地球与人类的一千零一问
414 </p>
415 <a href="#">播放</a>
416 </div>
417 </li>
418 <span>
419 <a href="#">更多>></a>
420 </span>
421 </ul>
422 <ul id="all" >
423 <li>
424 <span>1</span>
425 <a href="#" onclick = "javascript:">全部：关于地球与人类的一千零一问</a>
426 <div>
427 <img src="img/pen.png" alt="pen">
428 <p>
429 解密：关于地球与人类的一千零一问
430 </p>
431 <a href="#">播放</a>
432 </div>
433 </li>
434 <li>
435 <span>2</span>
436 <a href="#" onclick = "javascript:">全部传奇：探索全世界重大历史事件</a>
437 <div>
438 <img src="img/pen.png" alt="pen">
439 <p>
440 解密：关于地球与人类的一千零一问
441 </p>
442 <a href="#">播放</a>
443 </div>
444 </li>
445 <li>
446 <span>3</span>
447 <a href="#" onclick = "javascript:">全部：展现普通人的曲折命运和动人...</a>
448 <div>
449 <img src="img/pen.png" alt="pen">
450 <p>
451 解密：关于地球与人类的一千零一问
452 </p>
453 <a href="#">播放</a>
454 </div>
455 </li>
456 <li>
457 <span>4</span>
458 <a href="#" onclick = "javascript:">全部（BTV）：惊人事件和传奇背...</a>
459 <div>
460 <img src="img/pen.png" alt="pen">
461 <p>
462 解密：关于地球与人类的一千零一问
463 </p>
464 <a href="#">播放</a>
465 </div>
466 </li>
467 <li>
468 <span>5</span>
469 <a href="#" onclick = "javascript:">全部十最：30个震惊世界的Top...</a>
470 <div>
471 <img src="img/pen.png" alt="pen">
472 <p>
473 解密：关于地球与人类的一千零一问
474 </p>
475 <a href="#">播放</a>
476 </div>
477 </li>
478 <li>
479 <span>6</span>
480 <a href="#" onclick = "javascript:">全部的东：警卫员解密东秘...</a>
481 <div>
482 <img src="img/pen.png" alt="pen">
483 <p>
484 解密：关于地球与人类的一千零一问
485 </p>
486 <a href="#">播放</a>
487 </div>
488 </li>
489 <li>
490 <span>7</span>
491 <a href="#" onclick = "javascript:">全部影传奇：每一步电影都有自己的...</a>
492 <div>
493 <img src="img/pen.png" alt="pen">
494 <p>
495 解密：关于地球与人类的一千零一问
496 </p>
497 <a href="#">播放</a>
498 </div>
499 </li>
500 <li>
501 <span>8</span>
502 <a href="#" onclick = "javascript:">全部（上视纪实频道）：解密档案中...</a>
503 <div>
504 <img src="img/pen.png" alt="pen">
505 <p>
506 解密：关于地球与人类的一千零一问
507 </p>
508 <a href="#">播放</a>
509 </div>
510 </li>
511 <li>
512 <span>9</span>
513 <a href="#" onclick = "javascript:">全部传世国宝的千古传奇</a>
514 <div>
515 <img src="img/pen.png" alt="pen">
516 <p>
517 解密：关于地球与人类的一千零一问
518 </p>
519 <a href="#">播放</a>
520 </div>
521 </li>
522 <li>
523 <span>10</span>
524 <a href="#" onclick = "javascript:">全部系列：讲述社会百态，透视事实...</a>
525 <div>
526 <img src="img/pen.png" alt="pen">
527 <p>
528 解密：关于地球与人类的一千零一问
529 </p>
530 <a href="#">播放</a>
531 </div>
532 </li>
533 <span>
534 <a href="#">更多>></a>
535 </span>
536 </ul>
537 </div>
538 </div>
539 </body>
540 </html>
