1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
5 <title>Example 1</title>
6 <link rel="stylesheet" href="index.css" />
7 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
8 <script type="text/javascript" src="index.js"></script>
9 <script type="text/javascript">
10 $(function() {
11 $("#tabs").tabs("#main");
12 });
13 </script>
14 </head>
15 <body>
16 <ul id="tabs">
17 <li data-tab="sect1">Sect1</li>
18 <li data-tab="sect2">Sect2</li>
19 <li data-tab="sect3">Sect3</li>
20 <li data-tab="sect4">Sect4</li>
21 <li data-tab="sect5">Sect5</li>
22 </ul>
23 <div id="main">
24 <div data-tab="sect1">Sect1 content</div>
25 <div data-tab="sect2">Sect2 content</div>
26 <div data-tab="sect3">Sect3 content</div>
27 <div data-tab="sect4">Sect4 content</div>
28 <div data-tab="sect5">Sect5 content</div>
29 </div>
30 </body>
31 </html>
1 #tabs {
2 list-style: none;
3 overflow: hidden;
4 }
5
6 #tabs li {
7 float: left;
8 padding: 10px;
9 cursor: pointer;
10 }
11
12 #tabs li.active {
13 color: red;
14 }
15
16 #main div {
17 display: none;
18 }
19
20 #main .active {
21 display: block;
22 }
jQuery.fn.tabs = function(control) {
var element = $(this);
control = $(control);
//Delegate（委派）
element.delegate("li", "click", function() {
//遍历选项卡名称
var tabName = $(this).attr("data-tab");
//在点击选项卡时触发自定义事件
element.trigger("change.tabs", tabName);
});
//绑定到自定义事件
element.bind("change.tabs", function(e, tabName) {
element.find("li").removeClass("active");
element.find(">[data-tab='" + tabName + "']").addClass("active");
});
element.bind("change.tabs", function(e, tabName) {
control.find(">[data-tab]").removeClass("active");
control.find(">[data-tab='" + tabName + "']").addClass("active");
});
//激活第1个选项卡
var firstName = element.find("li:first").attr("data-tab");
element.trigger("change.tabs", firstName);
return this;
};
