Простые вкладки на JQuery

В заметке приведен пример создания вкладок на JQuery. Пожалуй это один из самых компактных вариантов реализации подобного решения. Далее вы сами в этом убедитесь.

Простые вкладки на JQuery

Скачать рабочий пример

1. Итак, во-первых подключите к веб-странице следующие стили:

#wrap div { display:none; }
#wrap.tab1 div.tab1,
#wrap.tab2 div.tab2,
#wrap.tab3 div.tab3 {
  display:block;
  width:100%;
}
#wrap.tab1 a.tab1,
#wrap.tab2 a.tab2,
#wrap.tab3 a.tab3 {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  cursor: default;
}

Как нетрудно догадаться по числам от 1 до 3 всего вкладок будет три. Новые вкладки придется добавлять строчками типа  #wrap.tab3 a.tabНомер и #wrap.tab3 div.tabНомер.

2. Во-вторых подключите библиотеку JQuery и на метод  ready() повесьте выполнение вот такого вот программного кода:

$('#wrap a').click(function() {
  if ($(this).attr('class') != $('#wrap').attr('class') ) {
    $('#wrap').attr('class',$(this).attr('class'));
  }
});

3. В-третьих дело за HTML разметкой, а она такова:

<div id="wrap" class="tab3">
  <a href="#" class="tab1">Первый таб</a> | 
  <a href="#" class="tab2">Второй таб</a> | 
  <a href="#" class="tab3">Третий таб</a>

  <div class="tab1"><p>Содержимое первой вкладки.</p></div>
  <div class="tab2"><p>Содержимое второй вкладки.</p></div>
  <div class="tab3"><p>Содержимое третьей вкладки.</p></div>
</div>

Вкладка, открытая по умолчанию (при первой загрузке веб-страницы), будет обозначена классом CSS в родительском блочном элементе <div id="wrap" class="tabНомерВкладки">.

Скачать пример вы можете в начале статьи.

Опубликовано 19-04-2013 в 14:10


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты