Как сделать вкладки

Готовый образец, реализации табов это минимум кода, с использованием javascript jQuery, и минимализм стилей.

HTML

<div class="tabs" id="mytabs">
    <!-- Вкладки -->
    <div class="all-tabs">
        <a href="#name1" class="tab active" id="name1">Вкладка 1</a>
        <a href="#forsname2" class="tab" id="forsname2">Вкладка 2</a>
        <a href="#veryve" class="tab" id="veryve">Вкладка 3</a>
    </div>
    <!-- Контент табов -->
    <div class="contents">
        <div class="content active" id="name1">Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. </div>
        <div class="content" id="forsname2">привет 2</div>
        <div class="content" id="veryve">привет 3</div>
    </div>
</div>

Ситаксис вкладки и её контента

<a href="#ID" class="tab" id="ID">ИМЯ ВКЛАДКИ</a>
<div class="content" id="ID">СОДЕРЖИМОЕ ВКЛАДКИ</div>

CSS

/* Глобальные */
.tabs .tab{float:left;}
.tabs .content:not(.active){display:none}
.tabs .all-tabs::after{clear:both;display:block;content:''}

/* Индивидуальные */
#mytabs{font: normal 13px/20px Open Sans, Tahoma;}
#mytabs .tab{
    text-decoration:none;
    color: #000;
    padding: 10px 15px;
    background:rgba(0,0,0,.05);
}
#mytabs .tab.active{
    background:#007AFF;
    color: #fff;
}
#mytabs .tab:first-child{border-radius:5px 0 0 0}
#mytabs .tab:last-child{border-radius:0 5px 0 0}
.tabs .contents{
    padding:10px;
    border: 1px solid rgba(0,0,0,.05);
    margin-top:-1px;
}

JavaScript+jQuery код

function tab_init(id){
    var cont = $(id);
    $('.all-tabs a', cont).click(function(){
        $('.active', cont).removeClass('active');
        $(this).addClass('active');
        $('.content#'+$(this).attr('id'), cont).addClass('active');
    });
}
tab_init('#mytabs');
Комментарии - 0
для добавления комментария
пожалуйста войдите или зарегистрируйтесь
Хостинг от uCoz