Simple tab controls using jQuery
Tabbed content using jQuery
Today we are going to create simple notebook tab controls using the jQuery library for Javascript plus a little HTML and CSS markup.
If you have never used jQuery, you can start learning about it here. For today’s purposes we are just using it to locate some DOM elements and manipulate their CSS classes and attributes.
The HTML
To start with we need a small amount of appropriate HTML markup, like so.
<div id="tab-container">
<ul class="tab-menu">
<li id="html" class="active">HTML</li>
<li id="css">CSS</li>
<li id="javascript">Javascript</li>
</ul>
<div class="clear"></div>
<div class="tab-top-border"></div>
<div id="html-tab" class="tab-content active">
<h1>HTML</h2>
<p>This links to <a href="http://en.wikipedia.org/wiki/1995">1995</a> when HTML made sense.</p>
</div>
<div id="css-tab" class="tab-content">
<h1>Stylin'</h1>
<p>You should check out the <a href="http://www.csszengarden.com/">Zen Garden</a>.</p>
</div>
<div id="javascript-tab" class="tab-content">
<h1>Javascript ninjas</h1>
<p>We will teach you how to be a web <a href="http://www.amazon.com/Technical-University-Recruiting-Careers/b?ie=UTF8&node=239379011">ninja</a>. Your Javascript skills
will actually be so extreme you will be forbidden from leaving
the country due to arms export laws.</p>
</div>
</div>
The CSS
Then we will add some CSS. Note that the demo CSS also actually includes CSS reset also.
body{
background: #fff;
margin:0;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a {
text-decoration: none;
}
#tab-container{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height:14px;
margin: 3em auto;
width: 500px;
overflow: hidden;
}
#tab-container ul{
list-style: none;
list-style-position: outside;
width: 100%;
}
#tab-container ul.tab-menu li{
display: block;
float: left;
position: relative;
font-weight: 700;
padding: 5px 10px 5px 10px;
background: #eee;
border: 1px solid #ddc;
border-bottom: none;
border-width: 1px;
color: #999;
cursor: default;
height: 14px;
margin-bottom: -1px;
margin-right: 5px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#tab-container ul.tab-menu li.active{
background: #fff;
color: #0088CC;
height: 15px;
border-bottom: 0;
}
.tab-top-border {
border-bottom: 1px solid #d0ccc9;
}
.tab-content{
margin: 0 auto;
background: #efefef;
background: #fff;
border: 1px solid #ddc;
border-top-style: none;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
display: none;
height: 250px;
}
#tab-container div.active{
display: block;
}
.tab-content h1{
line-height: 1em;
height: 28px;
font-size: 22px;
}
The Javascript
And lastly we add the Javascript. Basically when someone clicks one of the tabs we hide the last one and fade in the new content using jQuery. You could play around with this and use a different jQuery animation technique (or none), but I like the understated effect of the fade in.
This code registers an event to be run on DOM ready, which means when the browser has finished loading the Document Object Model more or less. That event handler in turn registers a click handler for all list item elements beneath a tab-menu class element.
When the click handler runs it finds the id of the new active tab element, sets all others to no longer be “active”, hides all inactove tab bodies, and then adds the “active” class to the tab control which was clicked and runs the jQuery method fadeIn() on the tab body element corresponding to the tab which was clicked.
$(document).ready(function(){
var activeTabIndex = -1;
var tabNames = ["html","javascript","css"];
$(".tab-menu > li").click(function(e){
for(var i=0;i<tabNames.length;i++) {
if(e.target.id == tabNames[i]) {
activeTabIndex = i;
} else {
$("#"+tabNames[i]).removeClass("active");
$("#"+tabNames[i]+"-tab").css("display", "none");
}
}
$("#"+tabNames[activeTabIndex]+"-tab").fadeIn();
$("#"+tabNames[activeTabIndex]).addClass("active");
return false;
});
});
Demo
Click here to see the tabs in action.