Create Animated Tabs using JQuery and CSS.

Author: Zeeshan Rasool | Aug 30, 2010

CSS, JQuery, Web Development

Tabs is used for utilizing space and keep some stylish effects on website. jQuery tabs are very popular and it created some fancy look on web pages. I created a simple in use but a fancy looking jquery and css based tabs to give you and example. I used css to make it in some rounded style. Its doesnt work for IE but its fine in Firefox and Chrome. I hope you will like this stylish and sexy tabs tutorial. Fee free to subscribe by email (no spams will be sent). Cheers !

Download all files to get this gallery.
[ad#ad-3]

If you Like this Tutorial and Want to get New Tutorials news by Email, Then Subscribe Here.

JQuery Code

$(document).ready(function(){

$("#first-tab").addClass('buttonHover');
});

function navigate_tabs(container, tab)
{	
	$(".b").css('display' , 'none');
	$(".c").css('display' , 'none');
	$(".a").css('display' , 'none');
	
	$("#first-tab").removeClass('buttonHover');
	$("#second-tab").removeClass('buttonHover');
	$("#third-tab").removeClass('buttonHover');
	
	$("#"+tab).addClass('buttonHover');
	$("."+container).show('slow');
}

$(document).ready(function(){

$("#first-tab").addClass('buttonHover');

});

function navigate_tabs(container, tab)

{

$(".b").css('display' , 'none');

$(".c").css('display' , 'none');

$(".a").css('display' , 'none');

$("#first-tab").removeClass('buttonHover');

$("#second-tab").removeClass('buttonHover');

$("#third-tab").removeClass('buttonHover');

$("#"+tab).addClass('buttonHover');

$("."+container).show('slow');

}

CSS

 body{
	/* Setting default text color, background and a font stack */
	font-size:13px;
	background: #fff;
	font-family:Arial, Helvetica, sans-serif;
}
.b, .c{ display:none;}

#body em{ font-style:normal; font-size:36px;}

.buttons{
	border-bottom:solid #d1c8b8 4px;
	display:block;
	padding:8px;
	width:80px;-moz-border-radius: 1em 4em 1em 4em;
	border-radius: 1em 4em 1em 4em;
	text-align:center;
	margin:1px;
	background:#4b7975;
	text-decoration:none; color:#FFFFFF;
	float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}

.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

#body {
	background:#919b9d;
	text-align:justify;
	overflow:hidden;
	color:#fff;
	padding:20px;
	-moz-border-radius: 1em 4em 1em 4em;
	border-radius: 1em 4em 1em 4em;	height:200px;
	width:272px;
}
 
#wrap{
	text-align:left;
	overflow:hidden;
	width:350px;
	height:380px;
}

body{

/* Setting default text color, background and a font stack */

font-size:13px;

background: #fff;

font-family:Arial, Helvetica, sans-serif;

}

.b, .c{ display:none;}

#body em{ font-style:normal; font-size:36px;}

.buttons{

border-bottom:solid #d1c8b8 4px;

display:block;

padding:8px;

width:80px;-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

text-align:center;

margin:1px;

background:#4b7975;

text-decoration:none; color:#FFFFFF;

float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px

}

.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

#body {

background:#919b9d;

text-align:justify;

overflow:hidden;

color:#fff;

padding:20px;

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em; height:200px;

width:272px;

}

#wrap{

text-align:left;

overflow:hidden;

width:350px;

height:380px;

}

Download all files and use this awesome and fancy script.
[ad#co-4]

Recommended WordPress Themes Stores

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com

Author of 99Points
Zeeshan Rasool is an experienced PHP Web Developer and founder at 99Points. Expert in Codeigniter (MVC), WordPress, JSON, jQuery & HTML5

Create Animated Tabs using JQuery and CSS.

If you Like this Tutorial and Want to get New Tutorials news by Email, Then Subscribe Here.

JQuery Code

CSS

Recommended WordPress Themes Stores

Friends

Categories

Popular post

Create Animated Tabs using JQuery and CSS.

If you Like this Tutorial and Want to get New Tutorials news by Email, Then Subscribe Here.

JQuery Code

CSS

Few More Brilliant Posts !

Recommended WordPress Themes Stores

Friends

Categories

Popular post