Twitter Bootstrap Tabs - Save lastest

by Salustiano Silva

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" role="tablist" id="myTab">
    <li role="presentation" class="active">
        <a href="#novas" aria-controls="novas" role="tab" data-toggle="tab">Novas Mensagens</a>
    </li>
    <li role="presentation">
        <a href="#andamento" aria-controls="andamento" role="tab" data-toggle="tab">Em Andamento</a>
    </li>
    <li role="presentation">
        <a href="#resolvidas" aria-controls="resolvidas" role="tab" data-toggle="tab">Resolvidas</a>
    </li>
    <li role="presentation">
        <a href="#canceladas" aria-controls="canceladas" role="tab" data-toggle="tab">Canceladas</a>
    </li>
    <li role="presentation">
        <a href="#pendentes" aria-controls="pendents" role="tab" data-toggle="tab">Pendentes</a>
    </li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="novas">
        A minha tab com as novas entradas
    </div>
    <div role="tabpanel" class="tab-pane" id="andamento">
        Assuntos em andamento
    </div>
    <div role="tabpanel" class="tab-pane" id="resolvidas">
        Cenas resolvidas
    </div>
    <div role="tabpanel" class="tab-pane" id="pendentes">
        Cenas pendentes
    </div>
    <div role="tabpanel" class="tab-pane" id="canceladas">
        Cenas canceladas
    </div>
</div>

CSS

body{
    padding:10px;
    font-size:9px;
}
.tab-content{
    padding-top:10px;
}

JavaScript

$(function(){
    var ultimaTab = document.cookie.replace(/(?:(?:^|.*;\s*)tabAtiva\s*\=\s*([^;]*).*$)|^.*$/, "$1");
    $('a[href="'+ultimaTab+'"').trigger("click");
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var tab = $(this).attr("href");
    document.cookie = "tabAtiva="+tab+"; expires=Fri, 28 Dec 2040 23:59:59 GMT; path=/";
});