О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Табы для сайта на jQuery
  • Инструменты
  • Заработок
  • Раскрутка
21 октября 2014 . Антон Кулешов

Табы для сайта на jQuery

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

Для начала нам нужно будет скачать архив с jQuery плагином, который находиться на странице github.

Далее подключаем скрипты и стили к своему проекту:

<link href="tabulous.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.min.js"></script>

В теле HTML документа создаём следующую структуру:

<div id="tabs">
  <ul>
      <li><a href="#tabs-1">Таб 1</a></li>
      <li><a href="#tabs-2">Таб 2</a></li>
      <li><a href="#tabs-3">Таб 3</a></li>
  </ul>
 <div id="tabs_container">
       <div id="tabs-1">
           Текст первого таба
      </div>
        <div id="tabs-2">
           Текст второго таба
      </div>
        <div id="tabs-3">
           Текст третьего таба
     </div>
    </div>
</div>

Как видите, в разметке нет ничего сложного. У нас есть ссылки с названиями табов и сами блоки с контентом. Для того что бы добавить ещё один таб потребуются дописать бок с контентом указав ему id и ссылку в пути которой будет этот же id.

После всех подготовительных действий вызываем новый появившийся метод tabulous() применительно к элементу div с id=tabs.

$("#tabs").tabulous();

У плагина есть четыре варианта анимации при переключении: scale, slideLeft, scaleUp, flip. Изменять их можно указав в настройке effect.

$("#tabs").tabulous({
    effect: "scale"
});

Надеюсь, вам будет полезно это решение, а у меня на этом всё.

#Вкладки и табы
7 012 2
Антон Кулешов
Создаем раскрывающиеся блоки тремя способами, используя jQuery, classList API и JavaScript Набор из 14 вкладок HTML Как сделать вкладки-табы для сайта на jQuery Аккордеон меню на CSS
ti1schweiger
ti1schweiger
07 ноября 2014
Довольно удобные табы для редактирования стилей.
Антон Кулешов
Антон Кулешов
07 ноября 2014
Мне тоже данный плагин понравился, когда я на него наткнулся.

Делаем форму обратной связи на PHP

Задний фон для сайта в виде частиц

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание