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; };