Tabby – простой и легкий скрипт табов

Для кнопок

<div class="tabs">
    <button class="active" data-tab="#tab1">Superheroes</button>
    <button data-tab="#tab2">Ice Cream</button>
    <button data-tab="#tab3">Seasons</button>
</div>

<div class="tabs-content">
    <div class="tabs-pane active" id="tab1">
        Superheros
        ...
    </div>

    <div class="tabs-pane" id="tab2">
        Ice Cream
        ...
    </div>

    <div class="tabs-pane" id="tab3">
        Seasons
        ...
    </div>
</div>

Для списков

<ul class="tabs">
    <li class="active"><a class="active" data-tab="#tab1" href="#">Superheroes</a></li>
    <li><a data-tab="#tab2" href="#">Ice Cream</a></li>
    <li><a data-tab="#tab3" href="#">Seasons</a></li>
</ul>

<div class="tabs-content">
    <div class="tabs-pane active" id="tab1">
        Superheros
        ...
    </div>
    ...
</div>

Инициализация

<script>
    tabby.init();
</script>

Настройки

tabby.init({
    selector: '[data-tab]', // Tab toggle selector
    toggleActiveClass: 'active', // Class added to active toggle elements
    contentActiveClass: 'active', // Class added to active tab content areas
    initClass: 'js-tabby', // Class added to <html> element when initiated
    callback: function ( toggle, tabID ) {} // Function that's run after tab content is toggled
});

https://github.com/cferdinandi/tabby/

0 comments
  1. Зулус Петренко
    Зулус Петренко
    24.10.2015 at 09:35

    Привет!
    Вот неплохая тема для публикации: http://trix-editor.org/

    Reply
  2. Игорь
    Игорь
    24.10.2015 at 16:33

    Спасибо, будет попозже

    Reply
Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *