87,910
社区成员
发帖
与我相关
我的任务
分享
<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");
<!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>
<!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>