Cacher is the code snippet organizer for pro developers

// simple tab
$('.tab a').click(function(e){
	var activeTab = $(this).attr('data-tab');

	$('.tab a').removeClass('active');
	$(this).addClass('active');

	$('.tabcontent').addClass('hide');
	$('.tabcontent[data-tab="' + activeTab + '"]').removeClass('hide');

	e.preventDefault();
});

<div class="tab">
	<a href="/" title="" data-tab="tab-1" class="active">First tab</a>
	<a href="/" title="" data-tab="tab-2">Second tab</a>
	<a href="/" title="" data-tab="tab-3">Third tab</a>
</div>

<section data-tab="tab-1" class="tabcontent">
	tab content
</section>

<section data-tab="tab-2" class="tabcontent hide">
	tab content 2
</section>

<section data-tab="tab-3" class="tabcontent hide">
	tab content 3
</section>

html, body { background: #eee; }

.hide { display: none; }

/**/

.tab a {
	background: #ccc;
	border: 1px solid #ccc;
	border-bottom: 0;
	color: #777;
	display: inline-block;
	font-size: 16px;
	padding: 15px;
	margin: 0 5px 0 0;
	border-radius: 5px 5px 0 0;
	position: relative;
	z-index: 100;
}

.tab a:hover { color: #444; }

.tab span {
	display: block;
	background: #fff;
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 1px;
}

.tab .active {
	color: #444;
	background: #fff;
}	

/**/

.tabcontent {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 0 5px 5px 5px;
	margin: 0 0 20px;
}