<div class=”tab_menu_container”>
<ul id=”tab_menu_1″ class=”tabs-nav” attrLoadingMessage=”Carregando…”>
<li class=”tab_cama_on”><a href=”www.exemplo.com/1″><span>Cama</span></a></li>
<li class=”tab_mesa_off”><a href=”www.exemplo.com/2″ attrLoadingMessage=”Carregando Mesa…”><span>Mesa</span></a></li>
<li class=”tab_banho_off”><a href=”www.exemplo.com/3″><span>Banho</span></a></li>
</ul>
<div class=”tabs-container”></div>
</div>

$().ready(function() {

$(“.tabs-nav li a”).livequery(‘click’,function() {

/* Set Variables */
var URL = $(this).attr(‘href’);

var TabMenu = $(this).parents(“li:first”).parents(“ul:first”).attr(‘id’);
var CurrentTab = $(this).parents(“li:first”);
var ContentArea = $(this).parents(“li:first”).parents(“ul:first”).nextAll(“div:first”);
var LoadingMessageDefault = $(this).parents(“li:first”).parents(“ul:first”).attr(‘attrLoadingMessage’);
var LoadingMessageCustom = $(this).attr(‘attrLoadingMessage’);

/* Set Up the Loading Message */
if (typeof(LoadingMessageCustom) == “undefined” || LoadingMessageCustom == null)
{
var LoadingMessage = LoadingMessageDefault;
}
else
{
var LoadingMessage = LoadingMessageCustom;
}

var LoadingContent = ‘<div class=”tabs-loading”>’ + LoadingMessage + ‘</div>’;

/* Set All Tabs to the Inactive State */
$(“#” + TabMenu + ” > *”).each(function() {
var ActiveClass = $(this).attr(‘class’).replace(‘_off’,”_on”);
var InactiveClass = $(this).attr(‘class’).replace(‘_on’,”_off”);
$(this).removeClass(ActiveClass);
$(this).addClass(InactiveClass);
});

/* Set the Current Tab to the Active State */
var ActiveClass = CurrentTab.attr(‘class’).replace(‘_off’,”_on”);
var InactiveClass = CurrentTab.attr(‘class’).replace(‘_on’,”_off”);
CurrentTab.removeClass(InactiveClass);
CurrentTab.addClass(ActiveClass);

$.ajax({url: URL,
data: URL,
beforeSend: function() {
ContentArea.html(LoadingContent);
},
success: function(response){
ContentArea.html(response);
},
error: function(data) {
alert(‘erro…’);
},
type: “GET”,
dataType: “html”
});

return false;
});

});

/* CSS FROM http://stilbuero.de/jquery/tabs_3/ */
/* Caution! Ensure accessibility in print and other media types… */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types… */
.tabs-hide {
display: none;
}
}

/* Hide useless elements in print layouts… */
@media print {
.tabs-nav {
display: none;
}
}

/* Skin */
.tabs-nav {
list-style: none;
margin: 0;
padding: 0px;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: ” “;
}
.tabs-nav li {
border: 1px solid #ccc; /* TAB ITEM */
border-bottom: 0px;
float: left;
margin: 0 0 0 0px;
min-width: 84px; /* be nice to Opera */
}
.tabs-nav a, .tabs-nav a span {
display: block;
padding: 0 10px;
background: url(tab.png) no-repeat;
}
.tabs-nav a {
position: relative;
top: 1px;
z-index: 2;
padding-left: 0;
color: #000 !important;
font-size: 12px;
font-weight: bold !important;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
white-space: nowrap; /* required in IE 6 */
}
.tabs-nav .tabs-selected a {
color: #000;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
background-position: 100% -150px;
outline: 0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
background-position: 100% -100px;
}
.tabs-nav a span {
width: 64px; /* IE 6 treats width as min-width */
min-width: 64px;
height: 18px; /* IE 6 treats height as min-height */
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6 */
width: auto;
height: auto;
}
.tabs-nav .tabs-selected a span {
padding-top: 7px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor… */
cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now… */
cursor: pointer;
}
.tabs-nav .tabs-disabled {
opacity: .4;
}
.tabs-container {
border: 1px solid #ccc;
padding: 1em 8px;
background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
min-height: 150px;
}
.tabs-loading {
padding: 0 0 0 20px;
background: url(/images/loading.uitabs.gif) no-repeat 0 50%;
}

/* Tabs Customization – ready to use image backgrounds to each tab */
.tabs-nav .tab_cama_on {background-color: #FF6600; border:1px solid #FF6600;}
.tabs-nav .tab_mesa_on {background-color: #FF6600; border:1px solid #FF6600;}
.tabs-nav .tab_banho_on {background-color: #FF6600; border:1px solid #FF6600;}

.tabs-nav .tab_cama_off {background-color: #FF9966; border:1px solid #FF9966;}
.tabs-nav .tab_mesa_off {background-color: #FF9966; border:1px solid #FF9966;}
.tabs-nav .tab_banho_off {background-color: #FF9966; border:1px solid #FF9966;}