In this tutorial, you will learn how to create a tabbed content box using CSS and jQuery. You can also download the source code at the end of the tutorial.
Click here to Download the Demo
Browser Support » Firefox, Chrome, IE, Opera
Language » CSS2, HTML4 & jQuery
Difficulty » Beginner
Estimated Completion Time » 15 minutes
→ Download and include jQuery.
→ Make the Tabs using <li> tags.
→ Make the Tab Content Box using <div> tags.
→ Use Stylesheet code to style the Tab Menu and the Tab Content Box.
→ Use jQuery Code for Tabs Effect.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is a lightweight “write less, do more” JavaScript library.
Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading).
Both versions can be downloaded from › jQuery.com ‹.
We will have to include jQuery inside the <head>
tags.
Here’s the code:
<head>
<script type="text/javascript" src="jquery-1.5.2.min.js" ></script>
</head>
There’s an alternate way to include jQuery Library on the webpage without downloading jQuery file.
This can be done by adding src
attribute to the script
tag.
Set the value of src
attribute to “https://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js”;
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
</head>
We will use the <ul>
tag for creating the Menu Tab, and <li>
tags for creating the Menu Tab Labels.
Use class="tabs"
for this <ul>
tag.
Now give each <li>
element a rel
attribute. This rel
stands for Relationship.
We will relate this Menu Tab Item to its Tab Content later using this rel
attributes value using jQuery.
Here each <li>
item have different rel
value. We will use these rel
attributes values to relate them to their contents.
Here the first <li>
item has a class="active"
, to make it the default active tab when someone opens the webpage.
<ul class="tabs">
<li class="active" rel="tab1"> Call of Duty</li>
<li rel="tab2"> Mortal Combat</li>
<li rel="tab3"> Halo</li>
<li rel="tab4"> Portal</li>
</ul>
Now we will create a <div>
element with class="tab_container"
.
This <div class="tab_container">
will contain all the contents related to the Menu Tab in seperate <div>
.
Each of these div’s will have an attribute id
value equal to the rel
value of the Menu Tab Item to which it is related.
Each of these div’s will also have an attribute class="tab_content"
.
<div class="tab_container">
<div id="tab1" class="tab_content">
<p><img src="images/cod.jpg"> <br />
<strong>
Call of Duty: Black Ops bears the series' standard superbly,
delivering an engrossing campaign and exciting competitive multiplayer.
</strong>
</p>
</div><!-- #tab1 -->
<div id="tab2" class="tab_content">
<p><img src="images/mortal combat.jpg"> <br />
<strong>
Mortal Kombat returns after a lengthy hiatus and puts players
back into the Tournament for 2D fighting with gruesome combat.
</strong>
</p>
</div><!-- #tab2 -->
<div id="tab3" class="tab_content">
<p><img src="images/halo.jpg"> <br />
<strong>
Halo: Reach is the culmination of the superlative combat, sensational
multiplayer, and seamless online integration that are the hallmarks
of this superb series.
</strong>
</p>
</div><!-- #tab3 -->
<div id="tab4" class="tab_content">
<p><img src="images/portal.jpg"> <br />
<strong>
Portal 2 is an action shooter game from Valve Software that draws
from the original formula of innovative gameplay, story, and music,
which earned the original Portal more than 70 industry accolades.
</strong>
</p>
</div><!-- #tab4 -->
</div> <!-- .tab_container -->
The following effects are applied on the Tabs using the Stylesheet code.
The Active Tab menu will have a white(#FFFFFF) background color and the Inactive Tabs will have a grey(#EEEEEE) background color.
The <li>
item will be highlighted when a mouse is hovered on it.
Only the Active Tab Content will be shown to the user and the remaining Tab Content will remain hidden using the display:none;
property applied on the class="tab_content"
.
<style type="text/css">
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;
border: 1px solid #999999;
border-left: none;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
}
ul.tabs li:hover {
background: #CCCCCC;
}
ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab_container {
border: 1px solid #999999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
}
</style>
The jQuery code will detect clicks on the <li>
Menu Tab element and take the value of it’s rel
attribute and display the <div>
whose id
value matches the rel
value of the Menu Tab Item.
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>
Line 3 › $(document).ready(function(){
→ For executing code when a page is rendered completely.
[For div with class=”tab_content”]
Line 5 › $(“.tab_content”).hide();
→ This will hide all the <div>
elements with class="tab_content"
.
Line 6 › $(“.tab_content:first”).show();
→ To make the First <div class="tab_content">
active Tab Content, by default.
[For displaying the Active Tab Content]
Line 8 › $(“ul.tabs li”).click(function() {
→ To detect clicks on the <li>
items.
Line 9 › $(“ul.tabs li”).removeClass(“active”);
→ To remove the class="active"
from the previous Active Menu Tab.
Line 10 › $(this).addClass(“active”);
→ To apply the class="active"
to the current clicked <li>
Menu Tab Item.
Line 11 › $(“.tab_content”).hide();
→ To hide all the <div>
with class="tab_content"
.
Line 12 › var activeTab = $(this).attr(“rel”);
→ To assign the value of the rel
attribute from the current clicked <li>
Menu Tab Item to the activeTab
variable.
Line 13 › $(“#”+activeTab).fadeIn();
→ This will add a Fade In Effect to the <div>
whose id
value matches the rel
value of the current Active <li>
Menu Tab Item.
Click here to Download the Demo