Как сделать вкладки Jquery

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

demo

Для создания вкладок нам понадобится привычная связка HTML+CSS+Javascript. Только здесь я опишу пример с использованием библиотеки Jquery, потому как она реально сокращает код, который был бы написан на Javascript и наверняка подключена у вас, если используются другие скрипты или плагины галереи и т.д.

HTML

Раземтка текстового документа у нас начнется с контейнера в котором будут размещены блоки с навигацией и блоки контента, отвечающие им.

<!-- меню вкладок -->
<ul class="tab-links">
<li class="active"><a href="#tab1">Первая</a></li>
<li><a href="#tab2">Вторая</a></li>
<li><a href="#tab3">Третья</a></li>
<li><a href="#tab4">Четвертая</a></li>
</ul>
<!-- контент вкладок -->
<div class="tab-content">

<div id="tab1" class="tab active">
<p><b>Вкладка №1</b></p>
<p>Пример первой вкладки.</p>
</div>

<div id="tab2" class="tab">
<p><b>Вкладка №2</b></p>
<p>Пример второй вкладки.</p>
</div>

<div id="tab3" class="tab">
<p><b>Вкладка №3</b></p>
<p>Пример третьей вкладки.</p>
</div>

<div id="tab4" class="tab">
<p><b>Вкладка №4</b></p>
<p>Пример четвертой вкладки.</p>
</div>
</div>

CSS

Теперь нам необходимо преобразить то, что было создано, а также позаботиться о выделенных объектах. Все в деталях мы не будем рассматривать, потому как это креативный процесс и каждый придумает сам, как он хочет оформить дизайн. Самое основное, что необходимо отметить, так это класс, который будет отвечать за активную вкладку. По выше указанному примеру у нас этот класс будет active. Поэтому ему мы можем дать другой background, отличающийся от своих соседей и соответственно поменять значение color. Но это далеко не все, что можно будет применить к активному элементу.

/* стили ко всем вкладкам меню */
.tab-links a {
  padding: 9px 15px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.8);
  font-size: 16px;
  font-weight: 600;
  color: white;
  transition: all linear 0.5s;
  text-decoration: none;
  text-transform: uppercase;
}

/* класс активной вкладки меню */

li.active a, li.active a:hover {
  background: rgba(255, 0, 0, 0.8);
  color: white;
}

Jquery

А вот и изюминка всего рабочего процесса. Мы будем по готовности документа вешать обработчик событий по клику на одну из вкладок меню, а согласно клику, будем получать значение href этого элемента и передавать его значение контенту с аналогичным id, тем самым активируя его, а соседей скрывать.

$(document).ready(function() {
  $('.tabs .tab-links a').click(function(e) {
  var currentAttrValue = $(this).attr('href');
//активируем необходимую вкладку и скрываем остальные
  $('.tabs ' + currentAttrValue).fadeIn(500).siblings().hide();
// добавляем и удаляем класс active для необходимого пункта меню
  $(this).parent('li').addClass('active').siblings().removeClass('active');
  e.preventDefault();
  });
});

Реализация через Javascript

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

function selectTab(tab, content) {
  document.getElementById('first').style.display = 'none';
  document.getElementById('second').style.display = 'none';
  document.getElementById(content).style.display = 'block';
  document.getElementById('tab_1').className = '';
  document.getElementById('tab_2').className = '';
  document.getElementById(tab).className = 'active';
}
<!-- html -->
<ul>
<li><a href="javascript:selectTab('tab_1', 'first');" id="first" class="active">Первая</a></li>
<li><a href="javascript:selectTab('tab_2', 'second');" id="second">Вторая</a></li>
</ul>
<div id="content_1"></div>
<div id="content_2" style="display:none;"></div>

Но данная реализация совсем проста и не целесообразна, потому как будет увеличиваться при каждом добавлении вкладки все больше и больше объем кода. Гораздо актуальнее здесь повесить обработчик клика на блок меню, где мы будем определять был ли клик по ссылке, если нам вернуло правильный элемент, а именно A, то мы берем его атрибут href и используем для активации контента с аналогичным id, а всех соседей скрываем. Такой код будет универсальным, а выше указанный просто нашел в интернете. Тратить время на написание универсального кода не буду, потому как выше более быстрый и кроссбраузерный вариант на jq, хотя идею я вам подал.

не скупись оцени статью