Главная › JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Ринат
    11 лет назад

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

  2. AlevWiFi
    11 лет назад

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

  3. AleхWiFi
    11 лет назад

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

    	
	$('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 лет назад

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

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

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

  6. egor
    11 лет -1 месяц назад

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

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

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

  8. lex
    11 лет -1 месяц назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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