Css and jquery tabs

by Nikhil Mangal

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="tabs">
  <div id="tabs-links"> <a href="#">Tab 1</a> <a href="#">Tab 2</a> <a href="#">Tab 3</a> </div>
  <div id="tabs-container">
    <div class="tabs" style="display:block;">This is Tab 1 Content</div>
    <div class="tabs">This is Tab 2 Content</div>
    <div class="tabs">This is Tab 3 Content</div>
  </div>
</div>

CSS

#tabs {
	width:500px;
}
#tabs-links {
	width:100%;
	height:40px;
}
#tabs-links a {
	display:inline-block;
	height:40px;
	line-height:40px;
	background:#006699;
	color:#fff;
	text-decoration:none;
	padding:0px 20px;
}
#tabs-container div.tabs {
	width:100%;
	height:300px;
	background:#eee;
	display:none;
	padding:10px;
	border:solid 1px #ccc;
}

JavaScript

$(document).ready(function(e) {
        $('#tabs-links a').click(function(){
			$tab_link_index=$(this).index()+1;
			$('#tabs-container div.tabs').css("display","none");
			$('#tabs-container div.tabs:nth-child('+$tab_link_index+')').css("display","block");
			});
    });