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