搞定tab标签切换效果
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>搞定tab标签切换效果</title>
6 <style>
7 *{ margin:0; padding:0;list-style: none;}
8 body {font:12px/1.5 Tahoma;}
9 #big{border: 1px solid blue;width: 1180px;height: 500px;margin: 0 auto;}
10 #outer {width:240px;float: left;}
11 #tab {overflow:hidden;zoom:1;background:#34A00C;border:1px solid #000;}
12 #tab li {float:left;color:#fff;height:50px; width:450px;cursor:pointer; line-height:50px;font-size:18px;padding-left: 20px;}
13 #tab li.current {color:#fff;background:#FA8700;font-weight:bolder;}
14 #content {border:1px solid #000;width: 910px;height: 500px;float: left;margin-left: 28px;padding: 0;}
15 #content ul {display:none;padding:10px 0;}
16 #content li{border: 1px solid #ccc;height:172px;width: 210px;float: left;
17 margin:0 20px 50px 0;padding: 4px;}
18 #content li:hover{border: 1px solid #34A00C;}
19 #content img{width: 210px;height: 172px;}
20 </style>
21 </head>
22
23 <body>
24 <!-- html代码begin -->
25 <div id="big">
26 <div id="outer">
27 <ul id="tab">
28 <li class="current">农村生活污水处理</li>
29 <li>城镇生活污水处理</li>
30 <li>养殖污水处理</li>
31 <li>食品污水处理</li>
32 <li>医药污水处理</li>
33 <li>化工污水处理</li>
34 <li>医院污水处理</li>
35 <li>印染污水处理</li>
36 </ul>
37 </div>
38 <div id="content">
39 <ul style="display:block;">
40 <li><a href=""><img src="./image/nongcun/1.jpg"><span>农村生活污水处理</span></a></li>
41 <li><img src="./image/nongcun/2.jpg"></li>
42 <li><img src="./image/nongcun/3.jpg"></li>
43 <li><img src="./image/nongcun/4.jpg"></li>
44 <li><img src="./image/nongcun/5.jpg"></li>
45 <li><img src="./image/nongcun/6.jpg"></li>
46 </ul>
47 <ul>
48 <li><img src="./image/chengzhen/1.jpg"></li>
49 <li><img src="./image/chengzhen/2.jpg"></li>
50 <li><img src="./image/chengzhen/3.jpg"></li>
51 <li><img src="./image/chengzhen/4.jpg"></li>
52 <li><img src="./image/chengzhen/5.jpg"></li>
53 <li><img src="./image/chengzhen/6.jpg"></li>
54 </ul>
55 <ul>
56 <li><img src="./image/yangzhi/1.jpg"></li>
57 <li><img src="./image/yangzhi/2.jpg"></li>
58 <li><img src="./image/yangzhi/3.jpg"></li>
59 <li><img src="./image/yangzhi/4.jpg"></li>
60 <li><img src="./image/yangzhi/5.jpg"></li>
61 <li><img src="./image/yangzhi/6.jpg"></li>
62 </ul>
63 <ul>
64 <li><img src="./image/shipin/1.jpg"></li>
65 <li><img src="./image/shipin/2.jpg"></li>
66 <li><img src="./image/shipin/3.jpg"></li>
67 <li><img src="./image/shipin/4.jpg"></li>
68 <li><img src="./image/shipin/5.jpg"></li>
69 <li><img src="./image/shipin/6.jpg"></li>
70 </ul>
71 <ul>
72 <li><img src="./image/yiyao/1.jpg"></li>
73 <li><img src="./image/yiyao/2.jpg"></li>
74 <li><img src="./image/yiyao/3.jpg"></li>
75 <li><img src="./image/yiyao/4.jpg"></li>
76 <li><img src="./image/yiyao/5.jpg"></li>
77 <li><img src="./image/yiyao/6.jpg"></li>
78 </ul>
79 <ul>
80 <li><img src="./image/huagong/1.jpg"></li>
81 <li><img src="./image/huagong/2.jpg"></li>
82 <li><img src="./image/huagong/3.jpg"></li>
83 <li><img src="./image/huagong/4.jpg"></li>
84 <li><img src="./image/huagong/5.jpg"></li>
85 <li><img src="./image/huagong/6.jpg"></li>
86 </ul>
87 <ul>
88 <li><img src="./image/yiyuan/1.jpg"></li>
89 <li><img src="./image/yiyuan/2.jpg"></li>
90 <li><img src="./image/yiyuan/3.jpg"></li>
91 <li><img src="./image/yiyuan/4.jpg"></li>
92 <li><img src="./image/yiyuan/5.jpg"></li>
93 <li><img src="./image/yiyuan/6.jpg"></li>
94 </ul>
95 <ul>
96 <li><img src="./image/yinran/1.jpg"></li>
97 <li><img src="./image/yinran/2.jpg"></li>
98 <li><img src="./image/yinran/3.jpg"></li>
99 <li><img src="./image/yinran/4.jpg"></li>
100 <li><img src="./image/yinran/5.jpg"></li>
101 <li><img src="./image/yinran/6.jpg"></li>
102 </ul>
103 </div>
104 </div>
105 <!-- html代码end -->
106
107 <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
108 <script>
109 $(function(){
110 window.onload = function()
111 {
112 var $li = $('#tab li');
113 var $ul = $('#content ul');
114
115 $li.mouseover(function(){
116 var $this = $(this);
117 var $t = $this.index();
118 $li.removeClass();
119 $this.addClass('current');
120 $ul.css('display','none');
121 $ul.eq($t).css('display','block');
122 })
123 }
124 });
125 </script>
126
127 </body>
128 </html>