<style type="text/css" media="screen">
body {   
width: 400px;
margin: 10px;   
padding: 0;   
font: 1em Verdana, arial, sans-serif;   
font-size: .8em;   
}

h1 {   
margin-bottom: 1em;   
}

div.tabs {
background: #000;
padding: 1em;
}

div.container {   
margin: auto;   
width: 90%;   
margin-bottom: 10px;
}

ul.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}

ul.tabNavigation li {
display: inline;
}

ul.tabNavigation li a {
padding: 3px 9px;
background-color: #9f0c0c;
color: #fff;
text-decoration: none;
}

ul.tabNavigation li a.selected,
ul.tabNavigation li a.selected:hover {
background: #FFF;
color: #000;
}

ul.tabNavigation li a:hover {
background: #ccc;
color: #000;
}

ul.tabNavigation li a:focus {
outline: 0;
}

div.tabs div {
padding: 5px;
margin-top: 3px;
border: 1px solid #FFF;
background: #FFF;
}

div.tabs div h2 {
margin-top: 0;
}
</style>

<script src="http://s16.ucoz.net/src/u.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
   var tabContainers = $('div.tabs > div');
   tabContainers.hide().filter(':first').show();
     
   $('div.tabs ul.tabNavigation a').click(function () {
   tabContainers.hide();
   tabContainers.filter(this.hash).show();
   $('div.tabs ul.tabNavigation a').removeClass('selected');
   $(this).addClass('selected');
   return false;
   }).filter(':first').click();
});
</script>

<div class="tabs">
   <ul class="tabNavigation">
   <li><a class="selected" href="#first">Табы</a></li>
   <li><a class="" href="#second">Табы ТАБЫ</a></li>
</ul>
     
<div style="display: block;" id="first">
<p>Табы ТАБЫ</p></div>
<div style="display: none;" id="second">
<p>Табы ТАБЫ
</p>
</div>
</div>