Добавить в закладки
Отличный хостинг от 159 рублей

Вкладки на сайте встречаются довольно-таки часто. Особенно последние мои заказы прям пестрят ими. От чего не хочется каждый раз писать что-то новое, когда задача у них в основном одна и та же — группировка контента.

Поэтому я постоянно использую простенький скрипт из своего запаса, коим и покажу как сделать вкладки в html. Писал я его не сам. Однако ссылку на первоисточник предоставить увы не получиться, ибо вообще не помню откуда взял решение. Вроде бы где-то на форумах.

Тогда я ещё не знал JS в принципе, а сделать табы на сайте было нужно. Поэтому давайте опустим прелюдию и перейдём к реализации.

Создание HTML разметки вкладок

<div class="content">
        <div class="tabs">
                <span class="tabs_item">Вкладка 1</span>
                <span class="tabs_item">Вкладка 2</span>
                <span class="tabs_item">Вкладка 3</span>        
        </div>
        <div class="tabs_content">
                <div class="tabs_content-item">Контент вкладки 1</div>
                <div class="tabs_content-item">Контент вкладки 2</div>
                <div class="tabs_content-item">Контент вкладки 3</div>
        </div>
</div>

Как видите тут нет ничего сложного. Класс .content здесь можете не использовать на своё усмотрение. Он особой роли не играет и чуток попозже покажу, что нужно сделать, чтобы использовать скрипт на странице несколько раз.

В общем, здесь у нас 2 основных контейнера: сами кнопки табуляции и их содержимое.

Если будет удобнее, то можете переопределить теги в кнопках по собственному усмотрению. Самое главное оставить классы. Вы можете сделать, например так:

<ul class="tabs">
        <li class="tabs_item">Вкладка 1</li>
        <li class="tabs_item">Вкладка 2</li>
        <li class="tabs_item">Вкладка 3</li>
</ul>

В общем, подстраивайте все под свои нужды и структуру вёрстки. Все просто.

Заставляем вкладки работать с помощью jQuery

$(".tabs_content-item").not(":first").hide();
$(".tabs_item").click(function() {
  $(".tabs_item").removeClass("active").eq($(this).index()).addClass("active");
  $(".tabs_content-item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");

Тут все классы уже подставлены относительно HTML выше. Поэтому просто вставляете в свой файл .JS и будет работать. Однако обязательно нужно подключить библиотеку jquery. Без неё ничего не заработает. Однако это и не удивительно.

Для этого просто подключите файл jquery из вашего проекта или же просто скопируйте строку ниже и вставьте в html разметку сайта перед всеми подключёнными скриптами.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Там где прописано 1.11.1 в строке, можете заменить на необходимую версию jq.

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

$(".content .tabs_content-item").not(":first").hide();
$(".content .tabs_item").click(function() {
    $(".content .tabs_item").removeClass("active").eq($(this).index()).addClass("active");
    $(".content .tabs_content-item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");

Стилизация вкладок

Здесь уже импровизируйте сами. Из jquery кода ясно видно, что в активным вкладкам происходит добавление дополнительно класса .active. Относительно этого как раз и стоит «плясать».

.tabs_item.active {
    background-color: red;
    border: 1px solid blue;
}

Как видите все очень просто. Если у вас есть какие-нибудь идеи, как можно улучшить данное решение, то пишите. Однако я, например, не вижу в этом смысла. Все и так прекрасно работает) .

Ну и самое главное делитесь записью в соц. сетях. Это помогает раскрутке проекта.

Доступный VPS