Простой плагин табов(tabs) с использованием jQuery

Запилим jquery tabs своими руками, не используя стороние плагины

Понравилась статья? Оставьте оценку:

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

Сегодня мы закодим простые табы с использованием библиотеки джейквери. Да, существует множество сторонних разработок. Да, может быть проще и скачать. Но обычно сторонние разработки содержат либо множество «лишнего» функционала, либо достаточно сложную структуру. Поэтому сделаем свой плагин, простой и легкий. К тому же в дальнейшем я планирую использовать этот плагин в другой разработке, но об этом позже.

Первым делом создадим html разметку

<div class="tab-side-container">
<ul>
<li class="active"><a href="#side-tab641">В доме</a></li>
<li class=""><a href="#side-tab572">В офисе</a></li>
<li><a href="#side-tab305">В промышленных помещениях</a></li>
</ul>
<div class="panel-container">
<div id="side-tab641" style="display: block;">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div id="side-tab572" style="display: none;">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div id="side-tab305" style="display: none;">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>

Что тут c разметкой?

  1. Контейнер tab-side-container с нашими табами.
  2. Список ul со ссылками
  3. Блок panel-container c блоками — табами внутри. ID каждого блока соответствует атрибуту href ссылок выше (для переключения табов)

Собственно все, разметка готова, теперь JS код, с использованием jQuery. (Библиотека естественно должна быть подключена. О том как подключить jQuery рассказано тут)

    $('.tab-side-container').each(function(){
      var target = $('ul li a', this).attr('href');
      var tabContainer = $(this);

      $('ul li:first-child', tabContainer).addClass('active');
      $('.panel-container>div', tabContainer).hide();
      $(target, this).show();

      $('ul li a', this).on('click', function (e) {
        e.preventDefault();
        var target = $(this).attr('href');
        $('.panel-container>div', tabContainer).hide();
        $('ul li', tabContainer).removeClass('active');
        $(this).parent('li').addClass('active');
        $(target, tabContainer).show();

      });
    });

Вот такой код. Что делаем — каждому таб контейнеру выполняем инструкцию — скрываем все блоки табов, первому элементу ul списка присваиваем активный класс, и показываем блок соответствующий ссылке-заголовку. По клику на ссылке — заголовке отображаем соответствующий таб, и скрываем все остальные. Все предельно просто. Осталось прописать css правила.

/* ====================
 * Tabs
 ==================== */
.tab-side-container ul {
    display: block;
    padding: 0;
    list-style: none;
    text-align: center;
    margin-bottom: 70px;
}

.tab-side-container ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0 26px;
    position: relative;
}

.tab-side-container ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 215px;
    height: 60px;
    background: #ffcd00;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}

.tab-side-container ul li a:hover, .tab-side-container ul li a:focus, .tab-side-container ul li a:active {
    background: #fff;
}

.tab-side-container ul li.active a {
    background: #fff;
}

.tab-side-container ul li.active:after {
    content: '';
    background: url("../img/arrow-top.png") 0 0 no-repeat;
    width: 56px;
    height: 23px;
    position: absolute;
    bottom: -71px;
    left: 50%;
    margin-left: -28px;
}

.tab-side-container .panel-container {
    background: #ebebeb;
    padding: 40px;
}

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

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