Главная JavaScript

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

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

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

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

  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. Извините за возможно глупый вопрос, а можно, что б например при нажатии на один из табов, например tab1, чтобы отобразился контент всех табов. Спасибо.

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

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

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

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

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

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

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

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

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

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

  15. Здравствуйте, советую дополнить вариант с localStorage информацией о том, что эта технология лучше печенек тем, что:
    много места для хранения;
    работа на стороне клиента;
    учитывает обновление страницы;
    нет отправки на сервер.
    Куки по сравнению с HTML5 сильно проигрывают.
    Таблицу поддержки браузеров можно найти тут 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)

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