Easy Tabs Using Jquery

Easy Tabs Using Jquery :

Easy Jquery Tabs Intro : Hello Guys ! Jquery Tabs Are used every where and also its been a long time since i posted some jquery Tutorial,So i m today put a simple tutorial which elaborate how to create jquery tabs without using the Jquery UI.The Easy Tabs Using Jquery is gonna be very very easy ,so i’d say its a begginer level.So lets just dont waste time and see how we create the tabs using Jquery.

Easy Jquery Tabs Tutorial : 

Lets move on the Tutorial To understand how to create tabs in jquery.For leaning this you do not need to have extraordinary skills.you just need to understand html ,css and Jquery Off course .So Get started and see all the steps to create Jquery easy tabs .

Creating Tabs using Jquery  : Html Structure :

So lets take a look at Html Structure .The basic structure needed for Jquery tabs to work.you can easily Understand this ..here we have an wrapper div and then tabs list as unordered list which will serve as each tab.the there is tab-container div which holds the content for each of the tab .we have 4 tabs in list so we’ll have four div’s inside tab-content div.each with unique id and calss=’tab-content’.

<div id="wrapper">
<ul class="tabs">
 <li><a href="#tab1">Home</a></li>
 <li><a href="#tab2">News</a></li>
 <li><a href="#tab3">Photos</a></li>
 <li><a href="#tab4">Videos</a></li>
</ul>
<div class="tab-container">
 <div id="tab1" class="tab-content">...Put your content here...</div>
 <div id="tab2" class="tab-content">...put your content here...</div>
 <div id="tab3" class="tab-content">...put your content here...</div>
 <div id="tab4" class="tab-content">...put your content here...</div>
</div>
</div>

Now we move towards some styling  for these Jquery tabs.

Easy Tabs using Jquery  : CSS Code -

So Now we have basic structure .we’ll style it .here is a style that i’ve used.take a quick look as this will make your jquery tabs look like tabs.

/*-------DesignAeon.com----------*/
#wrapper{
width:500px;
position:relative;
top:50px;
left:25%;
overflow:hidden;
padding:5px;
background:#f4f4f4;
border:1px solid #b3b3b3;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px;
	line-height: 31px;
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
	background: #2c2c2c;
}
ul.tabs li a {
	text-decoration: none;
	color: #fff;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
ul.tabs li a:hover {
	background: #f6f6f6;color:black;
}
html ul.tabs li.current, html ul.tabs li.current a:hover  {
	background: #f6f6f6;
	border-bottom: 1px solid #f6f6f6;
}
ul.tabs li.current a
{
color:#000;
}
.tab-container {
	border: 1px solid #999;
	border-top: none;
	clear: both;
	float: left;
	width: 100%;
	background: #f6f6f6;

}
.tab-content {
	padding: 20px;
	font-size: 1.2em;
}
.tab-content h2 {
	font-weight: normal;
	padding-bottom: 10px;
	border-bottom: 1px ridge #ddd;
	font-size: 1.8em;
}
.tab-content h3 a{
	color: #254588;
}
.tab-content img {
	float: left;
	margin: 0 20px 20px 0;
	border: 1px solid #ddd;
	padding: 5px;
}

Now lets move towards the Jquery code where the real magic begins.

Easy Tabs using Jquery  : jquery Code -

The below is the Jquery code for the Jquery Easy tabs.it is really the heart of this tabbed interface.Now lets so what it does.This code on load of the page just hides all the content,then after that shows the only first one by adding the current class to it.that is what happen on load.

Then On click event on the unordered list element ,it removes the current class from the tab on which it is applied and after that it applies that class on the clicked element.That is how our Jquery easy tabs work.And this tiny code is more optimized rather than using UI if you only need tabs somewhere.

$(document).ready(function() {

	$(".tab-content").hide();
	$("ul.tabs li:first").addClass("current").show();
	$(".tab-content:first").show();

	//On Click
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("current");
		$(this).addClass("current");
		$(".tab-content").hide();
		var activeTab = $(this).find("a").attr("href");
		$(activeTab).fadeIn();
		return false;
	});

});

Easy Tabs Using Jquery : Demo -

Please take a look at demo how these tabs will look like.

Live Demo Jquery Tabs

Creating Jquery Tabs : Download sample -

you can also download jquery tabs working sample from the link below:

Download Jquery Easy Tabs

Tnx for visiting on designaeon.com and reading this article .Please share if you like our content.Keep visiting for more jquery tutorials.