tabs jquery

tabs jquery

by cristian_cena

HTML

<div id="contenedormenu">
    <ul id="menu" class="content">
        <li><a href="#" rel="oop1">Home</a></li>
        <li><a href="#" rel="oop2">Practice</a></li>
        <li><a href="#" rel="oop3">Attorneys</a></li>
    </ul>
</div>

<div id="oop1" class="contenidos"> ... uno ... </div> 
<div id="oop2" class="contenidos"> ... dos... </div> 
<div id="oop3" class="contenidos"> ... tres ... </div>

CSS

#menu li a{
    color:blue;
}
.contenidos{
    display:none;
    margin:10px; 
    padding: 10px;
    border:1px solid gray;
}

/*activos por defecto*/
#menu li:first-child a{
    color:red;
}
#oop1{
    display:block;
}

JavaScript

$(document).ready(function(){
   
    $("#menu li a").click(function(e){
        e.preventDefault();
        var id = "#" + $(this).attr("rel");
        //item activo
        $("#menu li a").css({"color":"blue"});             
        $(this).css({"color":"red"});             
        //contenido activo
        $(".contenidos").hide();
        $(id).show();
    });
    
});