Как делать табы

Опубликовано: 20 Июл 2015

Сегодня покажу как делать табы (они же вкладки) с помощью jQuery. Табы довольно популярная штука, так что знать, как их делать надо.
Итак, для начала нам нужен HTML. Скажем, у нас будет всего 3 таба (соотвественно и 3 вида содержимого). Пишем следующий код:

<h1>Табы</h1>
<div class="tabs">
<!-- Это сами вкладки -->
    <ul class="tabNavigation">
        <li><a class="" href="#first">Таб 1</a></li>
        <li><a class="" href="#second">Таб 2</a></li>
        <li><a class="" href="#third">Таб 3</a></li>
    </ul>
<!-- Это контейнеры содержимого -->    
    <div id="first">
        <h2>Таб 1</h2>
        <p> Текст 1</p>
    </div>
    <div id="second">
        <h2>Таб 2</h2>
        <p>Текст 2</p>
    </div>
    <div id="third">
        <h2>Таб 3</h2>
        <p>Текст 3</p>
    </div>
</div>

Обратите внимание, что имя якоря ссылки таба соотвестсвует id дива.
Теперь добавим сюда стилей:

div.tabs {
background: #333;
padding: 1em;
}
div.container {
margin: auto;
width: 90%;
margin-bottom: 10px;
}
ul.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}
ul.tabNavigation li {
display: inline;
}
ul.tabNavigation li a {
padding: 3px 9px;
background-color: #666;
color: #000;
text-decoration: none;
}
ul.tabNavigation li a.selected,
ul.tabNavigation li a.selected:hover {
background: #FFF;
color: #000;
}
ul.tabNavigation li a:hover {
background: #ccc;
color: #000;
}
ul.tabNavigation li a:focus {
outline: 0;
}
div.tabs div {
padding: 5px;
margin-top: 3px;
border: 1px solid #FFF;
background: #FFF;
}
div.tabs div h2 {
margin-top: 0;
}

И JavaScript код:

$(function () {
    var tabContainers = $('div.tabs > div'); // получаем массив контейнеров
    tabContainers.hide().filter(':first').show(); // прячем все, кроме первого
    // далее обрабатывается клик по вкладке
    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide(); // прячем все табы
        tabContainers.filter(this.hash).show(); // показываем содержимое текущего
        $('div.tabs ul.tabNavigation a').removeClass('selected'); // у всех убираем класс 'selected'
        $(this).addClass('selected'); // текушей вкладке добавляем класс 'selected'
        return false;
    }).filter(':first').click();
});

Комментарии (0)


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




Разрешённые теги: <b><i><br>Добавить новый комментарий: