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

Содержание: Вступление Код jQuery-скрипта для переключаемых блоков с вкладками Добавлено 07.03.2010 (обновлено 09.04.2015) Скачать Универсальный jQuery-скрипт для блоков с вкладками HTML-код, который нужно использовать для скрипта Обязательные CSS-стили для вышеуказанного HTML-кода Примеры Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после ...

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

  1. спасибо Дим, буду пробовать

  2. за скрипт спасибо, как раз для одного сайта пригодится.
    оффтоп: не знаешь как разбить теги на категории? чтобы моңно было выводить и т.д. как у слона под статьями, напр. http://slon.ru/articles/309304/

  3. Спасибо за скрипт, Дима. Ох как бы он мне пригодился полгода назад.

  4. Больше похоже на решение конкретной проблемы, чем на универсальный скрипт. Для универсальности не хватает настроек.
    Код можно значительно сократить, примерно так:

    
    $(function() {
    	$('ul.tabs').delegate('li:not(.current)', 'click', function() {
    		$(this).addClass('current').siblings('.current').removeClass('current').parents('div.section:first').find('div.box').hide().eq($(this).index() ).fadeIn(150);
    	});
    });
    
  5. Скрипт хорош, а можете подсказать как сделать так, чтобы он запоминал открытую вкладку, и при переходе (или обновлении) на другую страницу, показывал открытой ту вкладку, которая была активна.
    Примерно догадываюсь, что это как то надо сохранить в куках, но опыта маловато пока в этом.

  6. 
    (function($) {
    $(function() {
    
        $('ul.tabs').each(function() {
    	$(this).find('li').each(function(i) {
    	    $(this).click(function(){
    		$(this).addClass('current').siblings().removeClass('current');
    		var p = $(this).parents('div.section');
    		p.find('div.box').hide();
    		p.find('div.box:eq('+i+')').show();
    	    });
    	});
        });
    
    })
    })(jQuery)
    

    Нет эффекта при появлении, но и нет глюка с перескакиванием в начало страницы. А нужный эффект, если не ошибаюсь, можно прописывать в свойствах show().
    Ну и, конечно же, спасибо!

  7. Хороший блог, полезные статьи. Спасибо, Дмитрий. Подписался на RSS!

  8. Добрый день.

    Я бы на вашем месте не объявлял .current в табах и .visible в боксах — мне кажется, это лишняя манипуляция. Класс .visible можно принудительно обозначить для соответствующего элемента при обработке скрипта.

  9. Мне в твиттере как-то сказали, что я “изобретаю колесо”, что такой скрипт уже есть в jQuery UI

    Побольше бы таких колес и мир стал бы в разы лучше :-) Так что давай, изобретай еще велосипед, электричество и всё остальное — мы будем только рады твоим таким изобретениям :-)
    О чем это я.. А да, спасибо тебе, Дим, — ты как всегда великолепен!
    Полностью переписал сайдбар благодаря твоим вкладкам :-)

  10. Все здорово, а не подскажет ли кто как сделать вложенные табы :) Что-то я итак и сяк и никак…

  11. решил вопрос дублированием кода скрипта… и элементов на форме. более красивого нет решения?

  12. Хорошее минималистическое решение, уже пристроил к делу в блоге, где табы уже используются. Смущает одно, а есть ли смысл только для табов подключать библиотеку под 50-70 кило? Может быть найдется решение изменить код к примеру у «tabbera» — у него на все про все 8 кило.

  13. Dimox, спасибо за скрипт! jQuery очень удобен в этом плане)

  14. Великолепная работа.
    Есть вопрос —
    Как сделать, чтобы поисковили индексировали
    содержимое?

  15. Хороший компактный скрипт, только конфликтует с datepicker почему-то… что первым поставишь, то и будет работать. Очень жаль ((

  16. В сокращенном скрипте анимация присутствует?

  17. Теперь нужно попробывать сделать на своем блоге такое. Выглидит на самом деле лучше.

  18. Спасибо за плагин. Подскажи как исправить следующую ситуацию: если добавить табы внутрь другого таба, то всё перестаёт работать. Бага. Как избавиться? Хелп.

  19. Сам спросил, сам отвечаю.
    Для большей универсальности нужно заменить строку:
    var p = $(this).parents(‘div.section’);
    на:
    var p = $(this).parent(‘div.section’);
    И тогда начинают работать табы внутри табов. Хо-хо-хо.

  20. Эммм… поспешил, всё равно не работает((

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