jq tabs

by ademaro

HTML

<dl class="tabs">
    <dt class="active">Вкладка 1</dt>
    <dd class="active"><div>Содержимое 1</div></dd>
    <dt>Вкладка 2</dt>
    <dd><div>Содержимое 2</div></dd>
</dl>

CSS

dl.tabs {}
dl.tabs dt {float:left;position:relative;background:#F0F0F5;height:15px;padding:4px 12px 0;margin:0 5px 0 -2px;cursor:pointer;}
dl.tabs dt:hover {text-decoration:underline;}
dl.tabs dd {display:none;float:right;margin:20px 0 0 -100%;position:relative;width:100%;z-index:2;border:1px solid #CCCCD1;border-width:10px 1px 1px;}
dl.tabs dd div {padding:10px;}
dl.tabs dt.active {background:#CCCCD1;border-bottom:1px solid #CCCCD1;font-weight:bold;}
dl.tabs dd.active {display:block;}

JavaScript

$(function(){
    $("dl.tabs dt").click(function(){
        $(this)
            .siblings().removeClass("active").end()
            .next("dd").andSelf().addClass("active");
    });
});