Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
84 lines (70 sloc) 2.03 KB
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<script src="../lib/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
jQuery.fn.tabs = function(control){
var element = $(this);
control = $(control);
element.delegate("li", "click", function(){
// Retrieve tab name
var tabName = $(this).attr("data-tab");
// Fire custom event on tab click
element.trigger("change.tabs", tabName);
});
// Bind to custom event
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");
});
// Activate first tab
var firstName = element.find("li:first").attr("data-tab");
element.trigger("change.tabs", firstName);
return this;
};
</script>
<script type="text/javascript" charset="utf-8">
jQuery(function($){
$("#tabs").tabs("#main");
})
</script>
<style type="text/css" media="screen">
#tabs {
list-style: none;
overflow: hidden;
}
#tabs li {
float: left;
padding: 10px;
cursor: pointer;
}
#tabs li.active { color: red; }
#main div {
display: none;
}
#main .active {
display: block;
}
</style>
<body>
<ul id="tabs">
<li data-tab="sect1">Sect1</li>
<li data-tab="sect2">Sect2</li>
<li data-tab="sect3">Sect3</li>
<li data-tab="sect4">Sect4</li>
<li data-tab="sect5">Sect5</li>
</ul>
<div id="main">
<div data-tab="sect1">Sect1 content</div>
<div data-tab="sect2">Sect2 content</div>
<div data-tab="sect3">Sect3 content</div>
<div data-tab="sect4">Sect4 content</div>
<div data-tab="sect5">Sect5 content</div>
</div>
</body>
</html>