Easy to Use jQuery Tabs

Hi friend now i am going to share with you Easy to Use jQuery Tabs, here have Working demo, HTML, css and jquery for jquery Tab menu

Demo

The HTML Markup

<div id="tabs">
	<ul class="tabsmenu clearfix">
		<li class="active"><a href="#" data-id="tabone">Tabs One</a></li>
		<li><a href="#" data-id="tabTwo">Tabs Two</a></li>
		<li><a href="#" data-id="tabThree">Tabs Three</a></li>
		<li><a href="#" data-id="tabFor">Tabs For</a></li>
	</ul>
	<div class="tabContainer" id="tabone">
		<h3>Tab One</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh. Praesent in feugiat urna, eget adipiscing nibh. Curabitur sed risus eget risus ultrices sollicitudin congue id nisi. Vestibulum vitae massa eu erat lacinia ultricies. Mauris aliquam ornare leo nec porta. Nulla diam enim, sodales non quam sed, adipiscing posuere nibh. Morbi sed nisl felis.</p>
	</div>
	<div class="tabContainer" id="tabTwo">
		<h3>Tab Two</h3>
		<p>Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh. Praesent in feugiat urna, eget adipiscing nibh. Curabitur sed risus eget risus ultrices sollicitudin congue id nisi. Vestibulum vitae massa eu erat lacinia ultricies. Mauris aliquam ornare leo nec porta. Nulla diam enim, sodales non quam sed, adipiscing posuere nibh. Morbi sed nisl felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
	</div>
	<div class="tabContainer" id="tabThree">
		<h3>Tab Three</h3>
		<p>Praesent in feugiat urna, eget adipiscing nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh.  Curabitur sed risus eget risus ultrices sollicitudin congue id nisi. Vestibulum vitae massa eu erat lacinia ultricies. Mauris aliquam ornare leo nec porta. Nulla diam enim, sodales non quam sed, adipiscing posuere nibh. Morbi sed nisl felis.</p>
	</div>
	<div class="tabContainer" id="tabFor">
		<h3>Tab For</h3>
		<p>Curabitur sed risus eget risus ultrices sollicitudin congue id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh. Praesent in feugiat urna, eget adipiscing nibh.  Vestibulum vitae massa eu erat lacinia ultricies. Mauris aliquam ornare leo nec porta. Nulla diam enim, sodales non quam sed, adipiscing posuere nibh. Morbi sed nisl felis.</p>
	</div>
</div>

The CSS

<style>
	.clearfix:after {
		content: ".";
		display: block;
		font-size: 0;
		line-height: 0;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {
		display: inline-block;
	}
	* html .clearfix {
		height: 1%;
	}
	.clearfix {
		display: block;
	}
	#tabs {
		display: block;
	}
	.tabsmenu li {
		float: left;
		margin-left: 1px;
	}
	.tabsmenu li:first-child {
		margin-left: 0
	}
	.tabsmenu li a {
		display: block;
		padding: 5px 10px;
		background: #DDD;
		border: solid 1px #DDD;
		border-bottom: 0;
		color: #000;
		text-decoration: none;
		position: relative;
	}
	.tabsmenu li a:hover, .tabsmenu li.active a {
		background-color: #FFF;
		padding-bottom: 6px;
		margin-bottom: -1px;
	}
	.tabContainer {
		padding: 10px 15px;
		border: solid 1px #DDD;
		display: none;
	}
</style>

JavaScript

<script>
	$(function(){
	// Tabs Script
		$('#tabs .tabContainer').hide();
		getactiveTab = $(".tabsmenu li.active a").attr('data-id');
		$("#"+getactiveTab).show();
		
		$('.tabsmenu a').on('click touchend',function(event){
			event.preventDefault()
			$(this).parents('.tabsmenu').find('li').removeClass('active');
			$(this).parent().addClass('active'); 
			var currentTab = $(this).attr('data-id'); 
			$(this).parents('#tabs').find('.tabContainer').hide();
			$("#"+currentTab).show(); 
		});
	})
</script>