Главная › JavaScript

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

978 комментариев

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

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

Смотрите также

Создаем удобные, практичные вкладки с помощью jQuery

50 комментариев

Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью “Универсальный jQuery-скрипт для блоков с вкладками (табами)“. * * * Примерно последние месяц-два на англоязычных блогах мне стали ...

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

66 комментариев

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...

Добавляем кнопку “Google +1” в панель от Share42.com

68 комментариев

На своем другом блоге я недавно объяснил, почему в данный момент кнопка “Google +1” не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на ...

Красивые всплывающие подсказки с помощью jQuery

144 комментария

Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим ...

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

  1. Ринат
    11 лет 10 месяцев назад

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

  2. AlevWiFi
    11 лет 10 месяцев назад

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

  3. AleхWiFi
    11 лет 10 месяцев назад

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

    	
	$('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. Денис
    11 лет 10 месяцев назад

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

  5. Владимир
    11 лет 10 месяцев назад

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

    • Dimox
      11 лет 10 месяцев назад / ответ на коммент Владимир

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

      • Владимир
        11 лет 10 месяцев назад / ответ на коммент Dimox

        Уже сделал. Смысл есть например для интернет-магазинов. Вот пример.
        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. egor
    11 лет 10 месяцев назад

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

  7. Дядя Женя
    11 лет 9 месяцев назад

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

  8. lex
    11 лет 9 месяцев назад

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

  9. Ольга
    11 лет 9 месяцев назад

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

  10. Ольга
    11 лет 9 месяцев назад

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

  11. Жанна
    11 лет 9 месяцев назад

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

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

  12. Павел
    11 лет 8 месяцев назад

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

  13. Павел
    11 лет 8 месяцев назад

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

  14. Дмитрий
    11 лет 8 месяцев назад

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

  15. dudi
    11 лет 8 месяцев назад

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

  16. dudi
    11 лет 8 месяцев назад

    Сего дня ночью подгонял горизонтальные табы под себя, переписал 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. Марат
    11 лет 8 месяцев назад

    можно ли сделать чтоб при нажатие на таб окно не прыгало, а оставалось на том же месте?

  18. Марат
    11 лет 8 месяцев назад

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

  19. Марат
    11 лет 8 месяцев назад

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

  20. Марат
    11 лет 8 месяцев назад

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

    (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)

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