Иногда на сайте хочется реализовать разнообразные вкладки, чтобы пользователь смог посмотреть больше информации без перезагрузки страницы и это действительно имеет ряд плюсов, главным из которых является экономия пространства на странице. Сегодня я хочу показать один из методов создания таких вкладок при использовании jQuery и CSS.

Вот пример того, что должно получиться:

Давайте напишем код вкладок без контента и разберемся с ним:

<ul class="tabs">
    <li class="active">
        <a href="#tab1">Вкладка 1</a>
    </li>
    <li>
        <a href="#tab2">Вкладка 2</a>
    </li>
    <li>
        <a href="#tab3">Вкладка 3</a>
    </li>
</ul>

Тут мы создали список ul, состоящий из пунктов li, в которых находятся ссылки. Так же видно, что у первого пункта стоит active. Для чего же тут нужен active? А нужен он лишь для красивого оформления активной вкладки.

Так же в этом коде ссылки href ведут на текущую страницу, но уже к определенному якорю.

Теперь надо бы придумать где хранить данные, скрытые под этими вкладками... У меня для этого вышел такой код:

<section id="tabs-group-block">
    <div id="tab1">
        <h1>Блок №1</h1>
        <p>Текст блока</p>
    </div>
    <div id="tab2">
        <h1>Блок №2</h1>
        <p>Текст блока</p>
    </div>
    <div id="tab3">
        <h1>Блок №3</h1>
        <p>Текст блока</p>
    </div>
</section>

Вроде простая секция с дивами, id которых равен содержимому href-ссылок выше, описывать его подробно не вижу смысла, ведь в этих вкладках можно хранить абсолютно любую информацию... Давайте лучше оформим стили, а то как-то не красиво выходит ?

ul.tabs {
    background:#fafbfc;
    list-style:none;
    margin:0;
    padding:0 10px;
    border-bottom:1px solid #e7e8ec;
    height:17px;
    padding-bottom:18px;
    padding:18px 6px 20px;
    line-height:17px;
    height:17px;
    outline:none;
} 
ul.tabs li {
    display:inline-block;
}
ul.tabs li a {
    padding:18px 6px;
    line-height:17px;
    height:17px;
    color:#656565;
    text-decoration:none;
    transition:color 0.2s ease;
}
ul.tabs li.active a {
    border-bottom:2px solid #6285af;
}
ul.tabs li a:hover {
    border-bottom:2px solid #cad2db;
}

Тут нет стилей для содержимого вкладок, но их можно написать так же быстро. Например вот такой код:

#tabs-group-block {
    background:#fff;
    padding:20px 15px;
}
h1 {
    margin:0;
}

А теперь осталось самое главное - реализация переключения вкладок. Вот сразу весь примерный код, который у меня вышел:

$('#tabs-group-block > div').hide(); 
$('#tabs-group-block > div:first').show();
$('ul.tabs a').on('click',function () {
    $this=$(this);
    $this.parent().parent().find('li').removeClass('active');
    $('#tabs-group-block').children('div').hide();
    $('#tabs-group-block '+$this.attr('href')).show();
    $this.parent().addClass('active');
});

в первой строке мы прячем все наши вкладки, чтобы они не занимали наше пространство, но, в то же время, у пользователей без JS они останутся открытыми. Далее мы открываем первую вкладку(не забываем, что active у нас прописан для первого элемента ul).

Так как вкладки должны переключаться нажатием на ссылку, то реализуем проверку на это нажатие с помощью метода on с параметром click. Так же нам нужно запомнить на какую ссылку нажал пользователь, поэтому в переменную $this мы записываем содержимое объекта нажатой кнопки.

Ну а дальше идет реализация скрытия и появления нужных вкладок, а так же присвоение класса active.

Так же я хочу поделиться способом сохранения открытой вкладки после перезагрузки страницы. Для этого нам необходимо проверять и записывать хеш/якорь url-адреса страницы. Я не буду выкладывать тут полностью рабочий код, но пару подсказок дам.

Итак, как я уже сказал, хеш url-адреса мы будем использовать для поиска активной вкладки для текущей страницы. Как же нам его получить? Ответ прост! В JS есть элемент window, который содержит информацию о странице вlocation. Сам хеш в таком случае можно получить с помощьюwindow.location.hash.

Далее необходимо будет проверить, а существует ли вообще такая вкладка с подобным хешем или нет? И вообще, не пустой ли хеш? Проверить существование хеша я бы решил с помощью такого условия:

if(window.location.hash=='' || window.location.hash==undefined)

А для блока искал бы уже блок с нужным id и проверял его существование.

На этом я и закончу эту статью, оставляя пользователей с поиском блоков и хешей url-адреса. Удачи