HOWTO · jQuery
How to Work With Tabs in jQuery
In today's post, we'll briefly discuss about tabs in jQuery.
On this page
In today’s post, we’ll learn about tabs in jQuery.
Tabs in jQuery
The Tabs is a single content area with multiple areas, each associated with a heading in a list. Tabs are typically used to divide content into multiple sections that can be swapped out like an accordion to save space.
Tabs have a selected set of markup that ought to be used for them to work properly:
- The
tabsthemselves must be in an Ordered or Unordered list. - Each tab
titlemust be inside a list element and be accompanied by an anchor with an href attribute to be wrapped. - Each tab panel can be any valid element but must have an ID that matches the hash in the associated tab’s anchor.
The content material of every tab panel can be defined on the web page or loaded through Ajax; both are automatically handled based on the href of the anchor associated with the tab. Using the default tabs are set off on click on.
However, events may be modified to hover over the events option. Let’s understand it with the following example.
Code - HTML:
<ul id="tabs">
<li><a id="home">Home</a></li>
<li><a id="about">About</a></li>
</ul>
<div class="container" id="homeC">Home Screen</div>
<div class="container" id="aboutC">About Us</div>
Code - CSS:
#tabs {
width: 100%;
height:30px;
border-bottom: solid 1px #CCC;
padding-right: 2px;
margin-top: 30px;
}
a {cursor:pointer;}
#tabs li {
float:left;
list-style:none;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
margin-right:5px;
border-top-left-radius:3px;
border-top-right-radius:3px;
outline:none;
}
#tabs li a {
font-family:Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
color: #5685bc;;
padding-top: 5px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 8px;
display:block;
background: #FFF;
border-top-left-radius:3px;
border-top-right-radius:3px;
text-decoration:none;
outline:none;
}
#tabs li a.inactive{
padding-top:5px;
padding-bottom:8px;
padding-left: 8px;
padding-right: 8px;
color:#666666;
background: #EEE;
outline:none;
border-bottom: solid 1px #CCC;
}
#tabs li a:hover, #tabs li a.inactive:hover {
color: #5685bc;
outline:none;
}
.container {
clear:both;
width:100%;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
text-align:left;
padding-top: 20px;
}
.container h2 { margin-left: 15px; margin-right: 15px; margin-bottom: 10px; color: #5685bc; }
.container p { margin-left: 15px; margin-right: 15px; margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }
.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }
.container li { padding-bottom: 5px; margin-left: 5px;}
Code - JavaScript:
$(document).ready(function() {
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function() {
var t = $(this).attr('id');
if ($(this).hasClass('inactive')) {
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$('#' + t + 'C').fadeIn('slow');
}
});
});
In the above example, we have defined tabs with a ul tag which will list all the tabs. Contents of the tabs will be hidden by default using the hide method, and by default, the first tab will be visible.
Once the user clicks on any tabs, it will apply the .inactive class to all the list elements and remove the .inactive class from the selected list element. This will ensure that only the selected list element will be activated at any given time.
Try to run the above snippet in any browser that supports jQuery, and it will display the following result.
Output:
