Главная JavaScript

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

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

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

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

  1. Всем привет, есть проблема. есть добавлять классы к тегам li, то скрипт не работает в IE 6−8. Как это исправить, кто нить знает?

  2. Спасибо, использую ваш скрипт) Но если во вкладке содержимое разделено на страницы, подскажите как сделать так чтобы переход на другую страницу был тоже без перезагрузки страницы?

  3. Спасибо огромное! Я применила на своем сайте именно ваш код для табов. Всегда боялась связываться с jQuery, но, оказалось, что нет ничего проще. Спасибо спасибо спасибо!

  4. Переделал стилистику под свои нужды, а скрипт не работает :(
    Подскажите плиз что предпринять…
    http://test.dt-designer.ru/explorus/glavnaya.html (блок «Направление деятельности», под слайдшоу баром)

  5. Использую скрипт для отображения на каждой вкладке виджетов социальных сетей. 4-ый день мучаюсь — виджет вконтакте показывается лишь в том случае, если он показывается во вкладке, открывающейся по умолчанию при загрузке страницы, при этом с фейсбуком или твиттером разницы нет — отображаются на любой вкладке…
    Хотелось бы при загрузке показывать виджет фейсбука по умолчанию — но в этом случае виджет контакта при переключении на его вкладку не работает.
    Предполагаю, что проблема в скрипте, подгружаемом с сайта вконтакте для отображения виджета — если так, то как заставить подгрузится этот скрипт при переключении на вкладку?
    Если не сложно помогите разобраться, буду благодарен за помощь…
    Сайт telekanalteatr.ru/

  6. Спасибо огромное! Всё заработало.
    Прошу прощения что, не сумел найти ответ сам…

  7. и за сам скрипт конечно, тоже спасибо!

  8. Уважуха тебе товарищ! Давно искал подобную реализацию.

  9. Попробовал использовать ваш код, столкнулся с проблемой — при первоначальной загрузке странице загружается содержимое обоих блоков (насколько я понимаю, должно лишь загружаться содержимое первого блока). Подскажите, как можно исправить такую ситуацию?

    Дополнительные стили не использовал, только те, что указаны здесь.

  10. Дополнение: для браузера IE 9

  11. Вот одно замечание по вертикальным табам: если блок с вертикальными табами находится не на самом верху страницы (есть вертикальный скрол на странице), то при переключении таба происходит смещение экрана (скачок). И приходится прокручивать скролом на нужное место. Как сделать так, чтобы при переключении таба страница оставалась на том же месте, где и была изначально (не происходило скачка)? Спасибо.

    • Это не зависит от того, вертикальные табы или горизонтальные. Тут предложено решение.

      • Спасибо, сработало. Перескоки прекратились. Однако в этом решении проблемы тоже есть одна неприятная вещь, а именно то, что вычисляется максимальная высота контейнера и если в одной закладке много контента, а в другой мало, то там где мало под контентом много пустого места. Хотелось бы динамическую высоту для каждой закладки… буду думать. Если найдутся варианты — пишите.

  12. Очень хорошие табы! Спасибо!
    Подскажите пожалуйста, как можно сделать линки на табы? Что б можно было ссылкой открыть на странице конкретный таб (например третий).

  13. Хотелось бы попробовать Ваш скрипт в работе, но в моей теме обнаружилась одна особенность — jQuery в ней подключен (слайдер вверху страницы работает нормально), но особым способом — автором темы создан файл custom. js, в котором jQuery регистрируется для каждого вида слайдеров (их три) отдельно. Из других jquery-украшательств автором предусмотрена только обработка выдачи изображений (тоже подключено отдельно).

    «Общего вызова» jQuery нет, и на стандартные методы регистрации тема не реагирует — выдается всё содержимое всех вкладок и их заголовки, никакого переключения между ними не происходит.

    Подскажите, как можно подключить jQuery только для данного скрипта?

  14. Вертикальные табы конечно интересно. Только стили надо вынести в отдельный файл или тогда и js затолкать в файл. И один минус, который мне не нравится, сначала закладки потом описание.
    Вообще удобне когда

    закладка 1
    текст

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

  15. Доброе время суток!

    Посмотрите, пожалуйста, почему на моем сайте не работает Ваш скрипт (при нажатии на вторую вкладку — ничего не происходит)?

    Спасибо!

  16. Спасибо большое! Теперь работает!!! ;) Класс!

  17. Спасибо автору за скрипт!!! Всё работает, но есть проблема когда подключаеш jquery.tools.min.js для отображения модальних окон. Вкладки блоков сами по себе загружаются, но по щелчку формы сразу пропадают остаются только названия вкладок. Подключал библиотеку jquery.tools.min со всеми свойствами overlay, tabs не помогло работает одно или другое. Вы не подскажете в чем здесь может быть конфликт.

  18. Подскажите как исправить проблему? Когда разделяю табы изображением они неправильно функционируют.

    <div class="tabs">
    	<ul class="process">
    		<li>Таб 1</li>
    			<img src="изображение.png" width="32" height="15" />
    		<li>Таб 2</li>
    			<img src="изображение.png" width="32" height="15" />
    		<li class="current">Таб 3</li>
    			<img src="изображение.png" width="32" height="15" />
    		<li>Таб 4</li>
    			<img src="изображение.png" width="32" height="15" />
    		<li>Таб 5</li>
    	</ul>
    
    	<div class="box">
    		Содержимое 1
    	</div>
    
    	<div class="box">
    		Содержимое 2
    	</div>
    
    	<div class="box visible">
    		Содержимое 3
    	</div>
    
    	<div class="box">
    		Содержимое 4
    	</div>
    
    	<div class="box">
    		Содержимое 5
    	</div>
    </div>
  19. Если вкладки находятся не вверху страницы, то при клике по ним перекидываешься наверх.

  20. Решение проблемы с прыганием страницы вверх найдено =)

    У меня была ситуация, когда при переходе из таба в таб, страница прыгала вверх. Сначала в качестве временного решения я сделал табы с ссылками ключами например

    href="#md"

    ведущие на ключ рядом с табом

    <a title="md" name="md"></a>

    Но все оказалось проще и еффективнее если чуть-чуть доработать имеющийся код. А именно дать обработку Ajax. Делается это просто. На примере варианта без запоминания вкладок:

    (function($) {
     $(function() {
    
       $('ul.tabs').delegate('li:not(.current)', 'click', function() {
         $(this).addClass('current').siblings().removeClass('current')
           .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
           return false;
       })
    
    })
    })(jQuery)

    Что изменено? Да ничего, просто доработан код и добавлено в функцию

           return false;

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