WebWost WebWostbeta

Создаем HTML-табы

Реализация HTML-табов на jQuery и CSS

Al-Sher

Иногда на сайте хочется реализовать разнообразные вкладки, чтобы пользователь смог посмотреть больше информации без перезагрузки страницы и это действительно имеет ряд плюсов, главным из которых является экономия пространства на странице. Сегодня я хочу показать один из методов создания таких вкладок при использовании 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-адреса ? Удачи 

0 Комментариев

Новый комментарий