Создаем классные вкладки (tabs)

Очень часто на многих сайтах встречаются вкладки, которые позволяют сэкономить место и, по желанию посетителя, показать им больше информации.

То есть можно на одной странице разместить информацию, которая обычно занимала бы 3-5 страниц. Вкладки незаменимы в такой ситуации. В прежних уроках у нас уже были подобные примеры, но плагинов для вкладок огромное количество. Я постараюсь показывать Вам самые лучшие и полезные.

Начнем, пожалуй, с конца - c HTML.

<ul class="tabset_tabs">
<li><a href="#tab1" class="active">Вкладка 1</a></li>
<li><a href="#tab2">Вкладка 2</a></li>
<li><a href="#tab3">Вкладка 3</a></li>
</ul>
<div id="tab1" class="tabset_content">
<h2 class="tabset_label">Вкладка 1</h2>
Содержание Вкладки 1
</div>
<div id="tab2" class="tabset_content">
<h2 class="tabset_label">Вкладка 2</h2>
Содержание Вкладки 2
</div>
<div id="tab3" class="tabset_content">
<h2 class="tabset_label">Вкладка 3</h2>
Содержание Вкладки 3
</div>

Все вкладки необходимо создавать подобным образом. Для начала создаем список со всеми вкладками. Если хотим сделать, чтобы определенная вкладка сразу была открыта для пользователей, ей необходимо присвоить класс "active". Далее по каждой отдельной вкладке создаем слои. Обязательно для каждого слоя прописываем класс "tabset_content". После тега <div> идет тег заголовка <h2> с классом "tabset_label". Он необходим для правильной работы вкладок, однако не отображается на экране.

Теперь необходимо добавить между тегами <head></head> следующие строки:

<script type="text/javascript" src="addclasskillclass.js"></script>
<script type="text/javascript" src="attachevent.js"></script>
<script type="text/javascript" src="addcss.js"></script>
<script type="text/javascript" src="tabtastic.js"></script>

Тут мы добавили все необходимые скрипты для правильного функционирования. Получилось немного наляписто (целых 4 внешних файла), однако мне нравится полученный результат. Обратите внимание на пути к скриптам, и помните, что при перемещении файлов их необходимо менять (пути).

Также в исходниках у нас имеется таблица стилей, но ее прописывать в файле не обязательно, так как она автоматически подгружается через Javascript.

Вот и все готово! По-моему, вышло очень неплохо! Такие вкладки могут пригодиться при создании мини сайтов с описанием товаров, сервисов. Также можно сделать простой сайт-визитку. Удачи!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.phrogz.net
Перевел: Максим Шкурупий
Урок создан: 28 Апреля 2009
Просмотров: 88036
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 28 Апреля 2009 21:10
    ajan
    оо пасиб большое давно это искал
  • 28 Апреля 2009 21:19
    Игорь
    Вот это тема!!! отличное дополнение к сайту. Благодарю за этот урок.
  • 28 Апреля 2009 22:40
    LoksaL
    Эх, вот только вчера требовались такие вкладки, но уже нашел другое решение
  • 21 Мая 2009 09:33
    Sams
    Вот заметил такую темку, что если страничка полностью по вертикали помещается в окне браузера, то все ок, но вот как только она длиннее чем окно, то при нажатии на вкладку происходит перемещение всего экрана к этой части сайта, точно также как и при расставление ссылок типа "якарь". Собсно они по той же системе и сделаны. Вот у меня вопрос, возможно ли с помощью javascript сделать так, что бы это перемещение не происходило? Заранее благодарен!
  • 4 Июня 2009 07:40
    egorr
    Очень плохая реализация! Простое дело расписано кучей кода и зачем-то разнесено аж в четыре (!) файла. Автор не думает о том, что каждый файл это ещё один запрос. Недавно мне потребовались табы. Я написал свою реализацию. Весь код занимает одну строчку кода. При том же функционале, что и приведенном примере. Только у меня mouseover, а не click. Но это роли не играет. Пример лежит здесь _http://egorr.site88.net/sample/ Экономия кода достигается двумя вещами... Это применение toggle И основное преимущество, что не нужно искать реагирующий элемент. Тот что ловит клик и тот который на него реагирует имеют связку в виде одинакового имени (у первого это имя его класса, у его подопечного это имя ID) Только и остается при клике по элементу взять его имя класса и обратиться элементу с таким ID. Ещё это очень удобно при динамическом формировании кода. Не только для табов.
  • 15 Июня 2009 09:56
    Андрей
    Нажимаю на ссылку - картинка уезжает вверх браузера. Как сделать, чтобы она оставалась на месте? Спасибо.
  • 17 Июня 2009 08:39
    Андрей
    Группа поддержки не рассматривает эти вопросы. Ау!!! Максим... Ау!!! Откликнитесь кто-нибудь...
  • 17 Января 2010 12:45
    bloger
    egorr ты писал как использовать это через toggle, у меня все нормально , заработало, только вот одна маленькая деталь, а как сделать, что бы при открытии страницы она переключалась сразу например на третью вкладку или на шестую, как это задать в коде который я взял по ссылке приведенной в твоем коментарии
  • 4 Августа 2010 13:44
    NikSTamb
    Внедрили это на сайт http://www.onlinetambov.ru/content/news/page3.php но почему то при кликах страница скачет. Эта проблема наблюдается в шаблоне сайта, а в созданной вне шаблона странице проблемы нет. Та же проблема и при использовании http://ruseller.com/lessons.php?rub=32&id=573 Как это исправить?
  • 19 Июля 2012 07:24
    danil88
    Та же проблема что и у всех. Прыгает окно. Неужели не кто не решил этот момент? Так долго стилизировал и теперь из за этого сносить не охота.
    • 24 Июля 2012 08:13
      evgeniks
      function SetTabFromAnchor(evt){
      ....
      }
      Попробуйте в конце добавить return false
  • 22 Июля 2014 15:19
    DeVan64
    function SetTabFromAnchor(evt){	//setTimeout('document.body.scrollTop='+document.body.scrollTop,0);
    
    раскомментировать строчку
    setTimeout('document.body.scrollTop='+document.body.scrollTop,0);
    ну, я так сделал и всё заработало), правда "дергается" страница
^ Наверх ^