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

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

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

  1. Да уж а в блог засунуть придется попотеть.
    Кстати
    можешь дать код который стоит у тебя в сайдбаре, просто я также хочу по 2 вкладки выводить если не жалко конечно )) Заранее спасибо!

  2. Доброго времени суток. Спасибки за статью, реализовал у себя. Очень надо помощь привязать ссылки из основного меню к табам. Если есть уже такая статья очень хочу почитать.

  3. Почти получилось:

    	
    	$('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);
    	});	
    	$('ul.tabs1').delegate('li:not(.current1)', 'click', function() {
    			$(this).addClass('current1').siblings().removeClass('current1');
    			$('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
    	                $('ul:tabs').find('li:not(.current)').addClass('current').eq($(this).index())
                             .siblings().removeClass('current');
    	});
    

    Осталось достроить вторую половину с tabs1, не могу разобраться что я делаю не так.

    Задача: переход по вкладкам двумя способами. 1) из div:section — работает; 2) из общего меню ul:tabs1 — переход по содержимому вкладок получился, но только если находишься на той же странице что и вкладки, хочу с любой страницы попасть на вкладку.
    ul:tabs.li:not(.current) — я так понял не правильно указанный родитель, если не работает переключение названий вкладок.

  4. Спасибо, преймущество в том что нормальные стили. jquery увы перекосило у меня на сайте.

  5. Владимир
    7 лет назад

    Извините за возможно глупый вопрос, а можно, что б например при нажатии на один из табов, например tab1, чтобы отобразился контент всех табов. Спасибо.

    • Сделать можно много чего. Но смысла в этом не вижу.

      • Уже сделал. Смысл есть например для интернет-магазинов. Вот пример.
        http://wshop.com.ua/svetodiodnye-lampy/3398-1-led-122.html

        Сделал просто — первому табу с названием Все присвоил класс: class=»current allshow», ну и дописал в скрипте

        $(‘ul.tabs’).delegate(‘li.allshow’, ‘click’, function() {
        $(this).addClass(‘current’).siblings().removeClass(‘current’)
        .parents(‘div.section’).find(‘div.box’).eq($(this).index()).fadeIn(150).siblings(‘div.box’).show();
        })

        Спасибо Вам большое за Ваш скрипт.

  6. хорошая вещь, еще бы скумекать как это все запустить….

  7. Дядя Женя
    7 лет назад

    Скрипт настроил как надо, для пользователей всё отлично. Но проблема с поисковиками. Как сделать чтобы поисковики не индексировали текст из вкладок, которые скрыты? У меня просто для каждого раздела сайта в этих вкладках идёт как бы краткое описание раздела и его содержимого. Но теперь google в результатах поиска в кратком описании под ссылкой выдает содержимое из самой первой вкладки, независимо на какую страницу и раздел идёт ссылка. Потому что это самый первый текст который расположен в коде страницы, вот он его первый и индексирует.

  8. добрый день! подскажите пожалуйста, возможно ли вертикально расположить табы и слева и справа, при этом box оставить на прежнем месте? что для этого нужно изменить в коде?

  9. Здравствуйте. Попробовала я вставить этот скрипт в файл темы script.js — почему то не работает. Попробовала сделать отдельный файл tabs.js — работает. В чем может быть проблема? Если эта тема уже обсуждалась — ткните, пожалуйста, а то не нашла ответа.

  10. Интересно получается… Вставила новый код скрипта приветствия — приветствие пропало и вкладки не работают. Поставила обратно старый код приветствия — приветствие заработало, вкладки — нет. Вставила код вкладок ПЕРЕД кодом приветствия (до этого было Приветствие потом Вкладки) — заработало и то и другое…. Что же это может быть???

  11. Мне безумно подходит данное решение, но у меня на сайте это не работает. Конкретно не работает переключение по вкладкам, каждая вкладка подсвечивается, но перехода нет, установила данное решение http://dimox.name/examples/universal-jquery-tabs-script/cookies.html

    Я не программист, поэтому не могу понять что к чему.

  12. Доброй ночи
    Скрипт ваще бомба но есть вопросик )
    у меня в табах флеш плееры
    когда я запускаю один он воспроизводит когда переключаю на другой таб он не остонавливается
    Как сделать чтоб воспроизведение отключалось
    я знаю что это возможно но не знаю как

  13. Вот тут так табы работают посмотрете http://zerx.ru/38961-patrul.html
    Возможно так-же настроить? чтоб плеер выключался
    Я в вас верю!!!

  14. Отличные табы, спасибо за прекрасную работу.

  15. Здравствуйте, советую дополнить вариант с localStorage информацией о том, что эта технология лучше печенек тем, что:
    много места для хранения;
    работа на стороне клиента;
    учитывает обновление страницы;
    нет отправки на сервер.
    Куки по сравнению с HTML5 сильно проигрывают.
    Таблицу поддержки браузеров можно найти тут http://htmlbook.ru/html5/storage
    Даже ie8 хавает )
    Людям будет полезно знать.

  16. Сего дня ночью подгонял горизонтальные табы под себя, переписал css код, так будет покороче.
    Его можно сделать ещё короче на пару десятков символов, я идею дал, дальше сами.

    .section * {margin: 0; padding: 0;}
    .section body {margin: 30px; font: 13px/1.5 "Trebuchet MS", Tahoma, Arial;}
    .section a {color: #0094D6;}
    .section {
     width: 412px;
     border: 1px solid #a8a8a8;
     position: relative;
     background: #efefef;
    }
    ul.tabs {
     position: absolute;
     top: -29px;
     right: -2px;
    }
    .tabs li {
     height: 28px;
     line-height: 28px;
     float: left;
     display: inline;
     margin: 0 1px 0 0;
     padding: 0 13px;
     color: #777;
     cursor: pointer;
     background: #F9F9F9;
     border: 1px solid #a8a8a8;;
     border-bottom: none;
     position: relative;
    }
    .tabs li:hover,
    .vertical .tabs li:hover {
     color: #F70;
     padding: 0 13px;
     background: #FFFFDF;
     border: 1px solid #FFCA95;
     border-bottom: none;
    }
    .tabs li.current {
     color: #444;
     background: #EFEFEF;
     border: 1px solid #a8a8a8;
     border-bottom: none;
    }
    .box {
     display: none;
     padding: 5px;
    }
    .box.visible {
     display: block;
     padding: 5px;
    }
  17. можно ли сделать чтоб при нажатие на таб окно не прыгало, а оставалось на том же месте?

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

  19. понял, спасибо… помог способ с фиксированной высотой, только там один минус, если в одном box текста на весь экран, а в другом две строчки, высота у обоих будет на весь экран

  20. решение проблемы прыгающей страницы при переключении табов

    (function($) {
    $(function() {

    $(‘ul.tabs’).delegate(‘li:not(.current)’, ‘click’, function() {
    var wee=$(window).scrollTop()
    $(this).addClass(‘current’).siblings().removeClass(‘current’)
    .parents(‘div.section’).find(‘div.box’).hide().eq($(this).index()).fadeIn(150);
    $(window).scrollTop(wee)
    })

    })
    })(jQuery)

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