<ul class="tabs"> <li class="active"><a href="#">Вкладка 1</a></li> <li><a href="#">Вкладка 2</a></li> <li><a href="#">Вкладка 3</a></li> </ul> <div class="clear"></div> <div class="tabs_content"> <div>Содержимое первой вкладки</div> <div>Содержимое второй вкладки</div> <div>Содержимое третьей вкладки. И ещё разок повторим. Это содержимое третьей вкладки.</div> </div><!-- tabs content -->

ul.tabs {list-style:none; width:500px;} ul.tabs li:first-child {border-left:1px solid #ccc;} ul.tabs li {float:left; border-right:1px solid #ccc; border-top:1px solid #ccc; background-color:#eee;} ul.tabs li.active {border-bottom:1px solid #fff; background-color:#fff; margin-bottom:-1px;} ul.tabs li a {display:block; padding:5px 10px; color:#777; letter-spacing:-1px; outline:none; text-decoration:none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;} ul.tabs li.active a {font-weight:600; color:#000;} div.tabs_content {width:500px; border:1px solid #ccc;} div.tabs_content > div {padding:20px; display:none;} /* suggested to use display:none so that if the html is very long it wont jump badly */

<script src="http://stock-exchange.ucoz.com/js/jquery.js"></script> <script src="jTabs.js"></script> <script> $(document).ready(function(){ $("ul.tabs").jTabs({content: ".tabs_content", animate: true}); }); </script>