Tabs

tabs com slide direita esquerda

by Alessandro Viana

HTML

<ul id="linkTabs">
    <li id="1" class="linkTab ativa">tab 1</li>
    <li id="2" class="linkTab">tab 2</li>
    <li id="3" class="linkTab">tab 3</li>
</ul>

<div id="tabs">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
</div>

CSS

#tabs div {
    position: absolute;
    background-color: #abc;
    left: 100px;
    width: 90px;
    height: 90px;
    
  }

#tabs {
    left: 50px;
    width: 90px;
    height: 90px;
    border: 1px solid #000;
  }

JavaScript

$(function(){
    
    if($("#linkTabs .ativa").length){
        var id = $("#linkTabs .ativa").attr("id"); 
        mostraDiv(id);
    }
    
    $(".linkTab").click(function(){
        var id = $(this).attr("id");
        mostraDiv(id);        
    }); 
    
    function mostraDiv(id){
        $("#div" + id).animate({ "rigth": "-=100px" }, "slow" );
    }
    
});