1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 #tab
12 {
13 width: 300px;
14 height: 300px;
15 margin: 50px auto;
16 border: 1px solid red;
17 }
18 #tab1
19 {
20 width: 300px;
21 height: 300px;
22 margin: 50px auto;
23 border: 1px solid red;
24 }
25 #con
26 {
27 width: 500px;
28 height: 30px;
29 }
30 #con span
31 {
32 width: 98px;
33 height: 30px;
34 border: 1px solid #ccc;
35 display: block;
36 float: left;
37 line-height: 30px;
38 text-align: center;
39 }
40 #list
41 {
42 list-style: none;
43 }
44 #list li
45 {
46 width: 300px;
47 height: 300px;
48 line-height: 300px;
49 text-align: center;
50 display: none;
51 }
52 #con .select
53 {
54 background: #ddd;
55 }
56 #list .lis
57 {
58 display: block;
59 }
60 </style>
61 </head>
62 <body>
63 <div id="tab">
64 <div id="con">
65 <span class='select'>标题一</span>
66 <span>标题二</span>
67 <span>标题三</span>
68 </div>
69 <ul id="list">
70 <li class="lis">内容一</li>
71 <li>内容二</li>
72 <li>内容三</li>
73 </ul>
74 </div>
75 <div id="tab1">
76 <div id="con">
77 <span class='select'>标题一</span>
78 <span>标题二</span>
79 <span>标题三</span>
80 </div>
81 <ul id="list">
82 <li class="lis">内容一</li>
83 <li>内容二</li>
84 <li>内容三</li>
85 </ul>
86 </div>
87 <script src="jquery-1.8.3.min.js"></script>
88 <script>
89
90 $(function() {
91 $.fn.extend({
92 Tab:function(tit,select,con,show) {
93 var that=$(this);//保存this，this指向实例化对象tab
94 $(this).find(tit).click(function() {
95 var i=that.find(tit).index(this);//获取当前点击span的下标
96 $(this).addClass(select).siblings().removeClass(select);
97 that.find(con).eq(i).addClass(show).siblings().removeClass(show);
98 })
99 },
100 })
101
102
103 $('#tab').Tab('#con span','select','#list li','lis');
104 $('#tab1').Tab('#con span','select','#list li','lis');
105 })
106 </script>
107 </body>
108 </html>
