Jquery: Tabs

tabs.css

.tabs-content > div{ display: block; }
.tabs-content > div.hide { display:none; }

tabs.html

ul class="tabs">
      <!-- Give href an ID value of corresponding "tabs-content" <li>'s -->
        <li><a href="#eventos">Eventos</a></li>
        <li><a href="#locais">Locais</a></li>
    </ul>

    <div class="tabs-content">
        <!-- Give ID that matches HREF of above anchors -->
        <div class="tab" id="eventos">
           
        </div>
        <div class="tab hide" id="locais">

       

        </div>
    </div>

tabs.js

$(document).ready( function(){

//Tabs top5
    //TABS
    $(".tabs li:eq(0)").addClass('current');

    $(".tabs-content .tab").not(':eq(0)').addClass('hide');

    $(".tabs li a").click(function(){

        var $this = $(this),
        $href = this.hash,
        $tab = $($href),

        $currentTab = $(".tabs-content .tab:visible");

        $(".tabs li").removeClass('current');

        $this.parent().addClass('current');

        $currentTab.addClass('hide');

        $tab.removeClass('hide');

        return false;

    });

});