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

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

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

  1. Dimox спасибо за обзор
    пару вопросов:
    пытаюсь подключить скрипт через functions.php
    wp_enqueue_script( ‘tabs’, get_template_directory_uri().’/js/tabs.js’,array(‘jquery’),’1.0′);

    скрипт находиться здесь
    site/js/tabs.js — не получается так подключить

    только через
    header.php

    если я подключаю через header.php то вижу что скрипт грузиться на всех страницах, а надо только на тех где используется код

    в чем может быть проблема??

    и еще одни вопрос
    в css примера есть строка
    * {margin: 0; padding: 0;}

    я вставляю код в свой style.css и естетсанно летит весь диз
    а без * {margin: 0; padding: 0;} табы кривые
    подскажите как применить «нулевые отступы к табам в style.css
    и что обозначает зведочка
    /*
    */

    Dimox на вашем сайте супер приятное оформление
    могли бы вы выложить пример css табов вашего сайта?

    • в чем может быть проблема??

      Не знаю. Я всегда подключаю через header.php

      а без * {margin: 0; padding: 0;} табы кривые
      подскажите как применить “нулевые отступы к табам в style.css

      ul.tabs, ul.tabs li {margin: 0; padding: 0;}

      и что обозначает зведочка
      /*
      */

      Это комментарий к коду.

      Dimox на вашем сайте супер приятное оформление
      могли бы вы выложить пример css табов вашего сайта?

      Не хочу, чтобы его копировали.

  2. Сделал tab’ы и в один из них еще один tab, при нажатии на внутрений tab, переключаются внешние.

  3. Действительно хороший пример — перелопатил кучу примеров реализации табов на jQuery — этот самый простой, без сумасшедших css, когда вообще не ясно, что и где править, чтобы подогнать под себя, без кучи подключаемых плагинов js. В общем, спасибо!

  4. Доброго времени суток. У меня проблема. Тяяжело разобраться самому, вот хочу спросить. Скачал тему для вордпресс, там в самой теме статичный сайдбар должен отображаться в вкладках, как у вас: Последние, Популярные, Новостные. Но он почемуто не работает, вкладки то отображаются а само содержимое отображается по типу обычного сайдбара, пример на вашем: Верхний блок Последние( там же отображаются и другие вкладки и Популярные и Новостные) а ниже блок Популярные, еще ниже Новостные. Тоесть вкладки то отображаются но блоки разбитые на три часи. Все не отображается в одном, как у вас. В чем тут проблема? ответьте здесь, или мне на мыло. Плиз. Я не вебмастер, прошу ответ как чайнику.

  5. Dimox, доброго времени. В Opera 11 tab’ы не переключаются:(
    Вот тут можно убедится…
    Оч прошу помочь решить проблему!
    Спасибо

  6. Здравствуйте!
    Подскажите, пожалуйста…
    У меня табы съезжают в Internet Explorer…
    Уже не знаю, что и делать..
    В Opera и FireFox все ок…
    Вот сайт: http://world-of-photo.ru/

  7. хороший скрипт, вот беда то, ни как не могу подгрузить его аяксом((. Т.Е есть страница на которой аяксом грузится содержимое из бд. Хотел прикрутить ваш скрипт но ни как(( есть варианты???

  8. Огромное спасибо!
    Очень лакончино, как раз то, что надо!

  9. Здравствуйте!

    А гугл за display:none банит сайты???

  10. А у меня в IE почему то едет все…

  11. То, что нужно)) Автору большое-пребольшое спасибо)

  12. Здравствуйте!
    Dimox, приходилось ли Вам видеть те несколько функций из jQuery-скрипта, — нужные для работы блоков с табами, — отдельно? Или может есть фреймворк меньших размеров (10-20 кб) для их создания?
    Это необходимо, потому что предполагается вписать его в тело другого скрипта.
    Все мои поиски результата не принесли.

  13. Тут в архиве, кстати (дать прямую ссылку не получилось), лежит фреймворк на 30 кб, против обычных 70-ти и выше.

    • Лучше jquery грузить с гугла. Он отдает ее в сжатом виде и довольно быстро. Сам пользуюсь. Вот адрес http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2 — и работает она с вкладками замечательно и вес 24 килобайта и ооочень большой + что возможно она уже есть у посетителей вашего сайта. т.к. большинство сайтов в интернете используют именно её, а не собственноручно кастрированную версию. Посмотреть вкладки можете на главной странице моего блога — там я встроил 2 раза их. И это говорит что этот код работает. Нужно лишь чуть чуть включить голову.

  14. Здравствуйте. Есть очень важный вопрос. Я хочу поделить вкладки на — ОПИСАНИЕ- ЦЕНЫ — ОТЗЫВЫ. И если человек допустим будет искать отзывы и с гугла его закинет на страницу то вкладка отзывов не бутет активна или как???? Если нет то как этого добится????
    И еще, не глупо ли вообще помещать отзывы в одну из вкладок??? Очень прошу помочь.

    • если человек допустим будет искать отзывы и с гугла его закинет на страницу то вкладка отзывов не бутет активна или как????

      Не будет.

      Если нет то как этого добится????

      Никак не сделать.

      И еще, не глупо ли вообще помещать отзывы в одну из вкладок???

      По-моему, вполне нормально.

  15. Спасибо за ответ)

  16. Не совсем понятно, вернее совсем не понятно как в эти табы вложить виджеты ворпресса? Например для двух вкладок Архивы и Последние статьи, как сделать правильно, кто-нибудь может подсказать?

  17. Вот возник такой вопрос!
    К примеры у меня есть активный бокс (в смысле облать экрана определённой разметки и т.д) и есть автоматически генерируемая таблица, в которой есть строки, можно ли реализовать так, чтоб при наводе на определённую строку иначе (tr) менялось содержимое этого бокса точно в такой вариации как и увас при клике по табу. Здаётся мне что это не реализуемо так строки в таблице не имеют свой индекс как например ul->li???? Буду очень признателен, если вы мне хоть чем нибудь поможите.

  18. Скрипт помог! Спосибо, но…

  19. Спасибо, хороший скрипт, искал как раз для одного проекта.Понравилось то ,что все просто.

  20. P.P.S.
    про велосипед и jQuery UI
    зачем подключать и инициализировать огромный код, если есть такое элегантное решение?
    спасибо автору

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