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>
<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(">[data-tab='" + tabName + "']").addClass("active");
element.bind("change.tabs", function(e, tabName){
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 type="text/javascript" charset="utf-8">
<style type="text/css" media="screen">
#tabs {
list-style: none;
overflow: hidden;
#tabs li {
float: left;
padding: 10px;
cursor: pointer;
#tabs { color: red; }
#main div {
display: none;
#main .active {
display: block;
<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>
<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>