Главная JavaScript

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...

Комментарии (978)

  1. Привет Дима. Вопрос? Можно ли отдельно к jQuerry вкладкам применить Css стили отличные от тех, которые используются на сайте. И как это сделать? Проблема в том, что когда применяю стили в том же css? то они влияют и на весь сайт в целом. Заранее спасибо

    • Похоже, что у вас CSS-классы у табов совпадают с теми, что уже есть на сайте. Значит надо их переименовать, чтобы они были уникальными. Вот классы, которые нужно переименовать (и в CSS-коде, и в HTML-коде):

      section
      tabs
      box
      
  2. Спасибо Дим. Я сам тоже догадался все-таки и переделал уже

  3. Жаль в IE не работает, а так отличный вариант.

  4. Будьте добры, объясните чайнику как создать файл в формате .js :) Если есть возможность, скиньте его пожалуйста на почту, буду очень признателен. В строку ввёл. html код, как я понял, надо ставлять уже в сам виджет, а вот со скриптом запара)

    • Нужно открыть программу «Блокнот», либо другой текстовый редактор. Создать новый файл и вставить в него код скрипта. Затем сохранить этот файл с расширением .js.

      Если есть возможность, скиньте его пожалуйста на почту, буду очень признателен.

      В статье есть ссылка на скачку.

  5. Пример с куками не работает пот 1.3.2, для полной статьи не хватает :)

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

  7. Владислав
    12 лет назад

    Да, действительно классный и удобный скрипт.
    Мне особенно понравился он тем, что все добротно просто и понятно — в исходнике 2 файла, для новичков вообще отлично.

    Спасибо, хоть и UI пользуюсь, но и этот скрипт себе хватанул :)

  8. А есть такой скрип что он сам переключал блоки? К примеру текстовое содержание на видео, картинку с музыкальным сопровождением, игрушку.

  9. Комментариев уже слишком много чтобы их читать. Не пора ли из них вынести в эту запись нужное? Например про «вложенные табы»

    почта с дефисом Otshelnik-Fm@… не принимается для комментирования. пришлось точку ставить Otshelnik. Fm@… Исправьте

    • Комментариев уже слишком много чтобы их читать. Не пора ли из них вынести в эту запись нужное? Например про «вложенные табы»

      На комментариями теперь есть ссылочка «Лучшие комментарии», там отображаются полезные комментарии, которые являются дополнением к посту.

      почта с дефисом Otshelnik-Fm@… не принимается для комментирования. пришлось точку ставить Otshelnik. Fm@… Исправьте

      Дело было в запрете использования больших букв. Исправил, теперь все окей.

  10. ДД! помогите плиз! нужно сделать социальные плагины во вкладках… у меня не получается… для фейсбук, вконтакте и твиттер. что бы они были во вкладках…=(

  11. Спасибо за материал, очень помог.

  12. Дима, а вы бы не могли сейчас поделиться именно такими красивыми табами, как у вас на сайте?!

  13. Кстати не могли бы вы посмотреть на моём блоге wpos.com.ua, в сайдабре самом низу, почему ваши табы так отображаются у меня???

  14. ВОТ, в HEAD тоже прописано таким образом:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://wpos.com.ua/tabs.js"></script>

  15. Спасибо за клевые скрипты, обязательно буду использовать на своих сайтах!

  16. Перепробовал все варианты скриптов… Не хотят работать! Скрипты подключены. Если увас будет возможность посмотрите пожалуйста styledeco.ru/tabyi/ заранее спасибо!

  17. Вместо:
    $('ul.tabs').delegate ('li:not (.current)', 'click', function () {

    Поставьте:
    $('ul.tabs li: not (.current)').live ('click', function () {

    Проблема первого элемента в том, что некорректно связываются события через метод delegate, когда разметка с вкладками подгружена через ajax. Второй вариант работает отлично + мы делаем 1 раз выборку, а не 2

  18. еще можно добавить eq (0)

    вот сюда. parents ('div.section').eq (0).find ('div.box')

    это чтобы делать блок с вкладками внутри такого же переключаемого блока.

  19. все ок. еще бы можно было делать автоматическую смену табов

  20. Отличные табы) спс автору. Но один вопрос. я использую их в dle. и вставляю в табы видео. при открытии страницы с сериалом лагает nак как грузит плееры всех серий сразу. можно ли как-то сделать чтобы каждый таб грузился только по нажатию на него?

Ваш комментарий