Горизонтальные вкладки с анимацией

Плагин имеет 4 эффекта отображения контента и занимает менее 100 строчек кода.

Пример

Контент для вкладки 1

Контент для вкладки 2

В которой больше текста

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Контент для вкладки 3

Контент для вкладки 4

HTML

CSS

JS

Подключаем библиотеку jQuery и добавляем код плагина:

И инициализируем с нужным эффектом:

Возможные эффекты: scale, slideLeft,scaleUp и flip


Плагин tabulous на github

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Дмитрий:

    Не могу понять, что сделал не так.
    При попытке нажать по табам — перекидывает на главную :((

    Правда в консоле есть ошибка — Uncaught ReferenceError: jQuery is not defined
    at tabulous.js:113

    Не могу понять, как решить….

    Ответить
    • Alexander:

      Судя по ошибке jQuery не определена.
      А на главную перекидывать не должно, проверьте урл, слеш не стоит вначале?

      Ответить
  • Андрей:

    Привет. Ребята, подскажите плиз как прописать правильно конструкцию?

    И инициализируем с нужным эффектом:

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

    Текст наложился друг на друга в первом табе.

    Ответить
    • Alexander:

      Вначале JQuery, потом код плагина, потом эта конструкция.

      Текст наложился друг на друга в первом табе.

      А табы переключаются? Если да, то скорее всего что-то со стилями.

      Ответить
      • Андрей:

        Да, табы переключаются. В стилях не менял ничего, все с вашего примера.

        Ответить
        • Андрей:

          ссылка. Можете подсказать что не так? Пожалуйста.

          Ответить
          • Alexander:

            Это у меня ошибка в коде была…
            Спасибо что обратили внимание. Исправил.
            Нужно:

            <div id="tabs-1"></div>
            <div id="tabs-2"></div>
            <div id="tabs-3"></div>
            
            Ответить
            • Андрей:

              Это вам спасибо 🙂

              Ответить