Demo of simple tabs without jQuery UI
HTML
<div class="admix">
<div class="topox"><h class="topotext">TITLE TOPO</h></div>
<!--refazer bordas-->
<div id="tabs-container">
<ul class="tabs-menu">
<li> <a href="#tab-1">Balances </a></li>
<li> <a href="#tab-2">Stats </a></li>
<li> <a href="#tab-3">Configurations </a></li>
<li> <a href="#tab-4">Page</a> </li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
inside balances div
</div>
<div id="tab-2" class="tab-content">
inside stats div
</div>
<div class="big-one" id="configs" style="display:none">
inside config div
</div>
<div id="tab-3" class="tab-content">
inside page div
</div>
<div id="tab-4" class="tab-content">
inside some div
</div>
</div>
</div>
CSS
body {
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
font-size: 14px;
}
.tabs-menu {
height: 30px;
float: left;
clear: both;
}
.tabs-menu li {
height: 30px;
line-height: 30px;
float: left;
margin-right: 10px;
background-color: #ccc;
border-top: 1px solid #d4d4d1;
border-right: 1px solid #d4d4d1;
border-left: 1px solid #d4d4d1;
}
.tabs-menu li.current {
position: relative;
background-color: #fff;
border-bottom: 1px solid #fff;
z-index: 5;
}
.tabs-menu li a {
padding: 10px;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.tabs-menu .current a {
color: #2e7da3;
}
.tab {
border: 1px solid #d4d4d1;
background-color: #fff;
float: left;
margin-bottom: 20px;
width: auto;
}
.tab-content {
width: 660px;
padding: 20px;
display: none;
}
#tab-1 {
display: block;
}
JavaScript
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});