Недавно я решил написать небольшой скрипт вкладок, который может подойди для кого угодно. Все сделано в стиле Material Design.

Демо

Ниже находится пример того, что у меня в итоге получилось. Я использовал HTML/CSS и jQuery для создания этого скрипта вкладок.

Вместо стандартного HTML я использовал Jade. Если вам не хочется с ним разбираться, мы можете нажать кнопку «View Compiled» и вам покажется обычный HTML. А так в целом, я советую вам с ним разобраться. Вот ссылка на официальный сайт с документацией.

Я так же использовал SCSS, вместо обычного CSS. Кто с ним не знаком и не хотят с ним разбираться, то просто нажмите на «View Compiled» как и в Jade примере выше. А кто не знает SCSS и хочет с ним разобраться, то можете прочитать вот эти две статьи:

Они вам точно пригодятся и ускорят весть процесс разработки сайтов.

See the Pen zqyqaJ by Alexander (@bologer) on CodePen.dark

И так приступим уже и там много всего сказал.

HTML (Jade)

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

Выглядит это все примерно следующим образом.

<div class="container"> 
  <div class="tab-list">
    <ul class="fl-left">
      <li><a data-tab="#one" href="#" class="active">Первая вкладка </a></li>
      <li> <a data-tab="#two" href="#">Вторая вкладка </a></li>
      <li><a data-tab="#three" href="#">Третья вкладка</a></li>
    </ul>
    <div class="tab-content">
      <div id="one">Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст..</div>
      <div id="two">Aliquam nec faucibus est. Vivamus porttitor quam et diam cursus sodales. Aliquam tincidunt dui quis lacus varius semper in vel lacus. Duis ultrices malesuada pretium.</div>
      <div id="three">n ac porta odio. Nunc ut volutpat urna. Proin faucibus posuere tempor. Morbi fringilla mauris ut sapien consequat, blandit condimentum quam posuere. Integer ac augue at ipsum maximus dictum et vel leo. Sed ipsum neque, venenatis ac sagittis in, consequat sed dui. Sed lorem nisl, tristique vel mattis interdum, aliquam id turpis.</div>
    </div>
  </div>
</div>

В этом HTML я думаю, что нет никаких сложностей. Я взял основной <div class="container"></div> который является основным блоком, который удерживает всю конструкцию примера. Внутри, я использовал tab-list который является основной структурой вкладок. ul элемент — это шапка вкладок, где будут отображаться новые вкладки внутри каждого li элемента с ссылкой внутри. Обратите внимание на data-tab атрибут к каждой ссылки. С помощью этого определяется что будет показано пользователю при нажатии на нее.

<div class="tab-content"></div> — это то, куда будут добавляться <div id="{ID}"></div>. {ID} — это ID из data-tab атрибута который есть у каждой ссылки вкладки.

CSS (SCSS)

Этот раздел я описывать не буду, так как не смысла — это обычные стили того как все выглядит.

jQuery

Для того, то все что я написал с Jade и SCSS стало работать, мне нужно было использовать jQuery. Я бы мог воспользоваться JavaScript, но jQuery для меня кажется быстрее в плане написания кода и поэтому я его и выбрал.

$('.tab-list').find('ul li > a').on('click', function() {
  var $data_id = $(this).data('tab');
   
  $(this).closest('ul').find('li > a').each(function() {
    $(this).removeClass('active');  
  });
  
  $('.tab-content > div').each(function() {
    $(this).hide();
  });
  
  $($data_id).fadeIn(200);
  $(this).addClass('active');
  
  return false;
});

Код достаточно маленький. Сложного тут тоже ничего нет. Самая первая строка $('.tab-list').find('ul li > a').on('click', function() лишь триггер, который работает, каждый раз когда пользователь нажимает на ссылку вкладки. После того как пользователь нажал на ссылку, $data_id принимает в себя значение data-tab от ссылки — это ID элементы, который нужно показать.

Данная часть скрипта (ниже) удаляется все предыдущие active классы с вкладок (которые были выделены как активные).

$(this).closest('ul').find('li > a').each(function() {
    $(this).removeClass('active');  
});

А вот эта часть когда (ниже), прячем все открытые вкладки, чтобы открыть новую.

$('.tab-content > div').each(function() {
    $(this).hide();
});

И последняя часть скрипта, которая показана ниже включает в себя три строки.

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

Вторая строка. Устанавливает класс active для текущей вкладки, чтобы отобразить, что она на данный момент активная.

Третья строка. Отключает работу якоря, который стоит у ссылки. Если вы не заметили, то для вкладочных ссылок атрибут href имеет #, чтобы не было перехода по якорю нужно использовать return false;.

$($data_id).fadeIn(200);
$(this).addClass('active');  
return false;

Послесловие

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

Простой скрипт вкладок в стиле Material Design

Демо

HTML (Jade)

CSS (SCSS)

jQuery

Послесловие

Об авторе