Tabs

by AJIEKCEU

HTML

<div id="wrapper" class="tab1">
    <a href="#" class="tab1">Вкладка 1</a>
    <a href="#" class="tab2">Вкладка 2</a>
    <a href="#" class="tab3">Вкладка 3</a>
    <a href="#" class="tab4">Вкладка 4</a>

    <div class="tab1">Содержимое 1</div>
    <div class="tab2">Содержимое 2</div>
    <div class="tab3">Содержимое 3</div>
    <div class="tab4">Содержимое 4</div>
</div>

CSS

#wrapper div {
    display:none;
}
#wrapper.tab1 div.tab1,#wrapper.tab2 div.tab2,#wrapper.tab3 div.tab3,#wrapper.tab4 div.tab4 {
    display:block;
    width:100%;
}


#wrapper.tab1 a.tab1,#wrapper.tab2 a.tab2,#wrapper.tab3 a.tab3,#wrapper.tab4 a.tab4 {
    color: black;
    cursor: default;
    font-weight: bold;
    text-decoration: none;
}

JavaScript

$('#wrapper a').click(function() {
        if ($(this).attr('class') != $('#wrapper').attr('class') ) {
            $('#wrapper').attr('class',$(this).attr('class'));
        }
    });