Css and jquery tabs

by Andrey Dobrovoi

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;">Lorem ipsum
Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца.</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%;
	
	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");
			});
    });