关于自定义事件

<ul id="tabs">
<li data-tab="users">Users</li>
<li data-tab="groups">Groups</li>
</ul>
<div id="tabsContent">
<div data-tab="users"> ... </div>
<div data-tab="groups"> ... </div>
</div>
jQuery.fn.tabs = function (control) {
var element = $(this);
control = $(control);
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");
});
var firstName = element.find("li:first").attr("data-tab");
element.trigger("change.tabs", firstName);
return this;
};
$("ul#tabs").tabs("#tabContent");

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type='text/css'>
    body { margin:0; padding:0; }
    .clearfix:after { content:' '; display:block; clear:both; height:0; font-size:0; visibility:hidden; }
    .clearfix { *zoom:1; }
    ul,li { margin:0; padding:0; }
    ul { list-style:none; }
    ul li { float:left; width:50px; }
    #tabs li.active { background-color:red; }
    #tabsContent div { display:none; }
    #tabsContent div.active { display:block; }
    </style>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    <script type='text/javascript'>
    function tabs() {
    $('#tabs').delegate('li', 'click', function() {
    $('li').removeClass('active');
    $(this).addClass('active');
    $('#tabsContent').find('div').removeClass('active');
    $('#tabsContent').find('div').eq($(this).index()).addClass('active');
    });
    }$(function() {
        tabs();
    });
    </script>
    </head><body>
    <ul id="tabs" class='clearfix'>
    <li class='active'>Users</li>
    <li>Groups</li>
    <li>Groups</li>
    </ul>
    <div id="tabsContent">
    <div class='active'> ... </div>
    <div> ...... </div>
    <div> ......... </div>
    </div>
    </body>
    </html>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type='text/css'>
    body { margin:0; padding:0; }
    .clearfix:after { content:' '; display:block; clear:both; height:0; font-size:0; visibility:hidden; }
    .clearfix { *zoom:1; }
    ul,li { margin:0; padding:0; }
    ul { list-style:none; }
    ul li { float:left; width:50px; }
    #tabs li.active { background-color:red; }
    #tabsContent div { display:none; }
    #tabsContent div.active { display:block; }
    </style>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    <script type='text/javascript'>
    jQuery.fn.tabs = function (control) {
    var element = $(this);
    control = $(control);

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

    var firstName = element.find("li:first").attr("data-tab");

    element.trigger("change.tabs", firstName);

    return this;
    };
    $(window).bind("hashchange", function(){
    var tabName = window.location.hash.slice(1);
    $("#tabs").trigger("change.tabs", tabName);
    });$(function() {
    $("#tabs").bind("change.tabs", function(e, tabName){
    window.location.hash = tabName;
    });
    $("ul#tabs").tabs("#tabsContent");
    });
    </script>
    </head><body>
    <ul id="tabs" class='clearfix'>
    <li data-tab="users">Users</li>
    <li data-tab="groups">Groups</li>
    </ul>
    <div id="tabsContent">
    <div data-tab="users"> ... </div>
    <div data-tab="groups"> ...... </div>
    </div>
    </body>
    </html>