Content tabs using Jquery and CSS

In this article am going to explain how to create simple and attractive content tabs using Jquery and CSS. In this article am using CSS3 for gradient for background. Soon I will post an article regarding the CSS3 new features and techniques for creative and faster webpage design.

Jquery CSS HTML content Tabs

You need to download and attach the latest jquery library. Download the example file which contain all files including latest jquery library.

Download FileDemo

Below is the jquery code for css content tab.

$(document).ready(function(){
	
//Menu click event
$('.tabclass').click(function(){
	
//get the id of the clicked menu
var idname=$(this).attr('id');

//hide all the content div
$(".contentsoftabs").each(function(){
        $(this).hide();
      });
	  
//show the content div for clicked menu
$('.'+idname).show();

//remove the active class from all menu
$(".tabclass").each(function(){
        $(this).removeClass("tabactive");
      });
	  
//make clicked menu as active menu
$(this).addClass('tabactive');
})
});

Hope that you liked this article. Download the example and enjoy the example file. Thank You.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>