Simple JQuery Tabs
We will now create a simple tabbed interface using JQuery and html/CSS.I hope everyone knows what a tabbed interface is.So i guess nothing much needed to be told about it else See the Demo
We will start with the basic Html structure used.We are going to create 2 tabs.The tabs list is shown by using an unordered list.We are making the list inlne so that it may be displayed inline.Aslo we add two DIVs,one for each tab link.Here is the basic HTML structure and CSS of the tabbed interface
<html>
<head>
<style type="text/css">
#tabs{
margin:20 px 0;
}
#tabs ul {
float: center;
background: #003333;
height:25px;
width: 150px;
padding-top: 4px;
}
#tabs ul li {
float: left;
margin-left: 2em;
}
#tabs ul li a{
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
}
#tabs ul li.active{
background-color:#669999;
}
#tabs div{
min-height:200px;
padding:20px;
width:150 px;
margin-top:2px;
background-color:#339966;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href='#Tab1'>Tab 1</a></li>
<li><a href="#Tab2">Tab 2</a></li>
</ul>
<div id="Tab1">
<p>Contents in Tab1 </p>
</div>
<div id="Tab2">
<p>Contents in Tab2</p>
</div>
</div>
</body>
</html>
Now we need to add the JQuery code to make the tabbed interface work so that only the tab whose link has been clicked is shown visible.First we need to show the first tab as active when the page is loaded for the first time.For this we add the following JQuery code
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
Now having made the first tab visible,we will change the active tab depending on which link has been clicked.In the click() function of the link,we first remove the active class from all links.Then we add the active class to the link that has been clicked.Now we assign to a variable,the value of the href attribute of the active link.Finaaly,we show the active tab using the variable to which the active tab was assigned.That’s all.Here is the click() function
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var selectedTab=$(this).attr('href');
$('#tabs div').hide();
$(selectedTab).show();
return false;
});
The complete JQuery code
<script src="jquery-1.3.2.min.js" type="text/javascript" /></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var selectedTab=$(this).attr('href');
$('#tabs div').hide();
$(selectedTab).show();
return false;
});
});
</script>
I am really not good at designing.So the tabbed structure you find here will be very ugly looking.You can add better CSS structures to enhance the structure.
Download the Tab Files
Related posts:
Leave your response!