Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью “Универсальный jQuery-скрипт для блоков с вкладками (табами)“. * * * Примерно последние месяц-два на англоязычных блогах мне стали ...
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...
На своем другом блоге я недавно объяснил, почему в данный момент кнопка “Google +1” не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на ...
Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим ...
Комментарии (978)
А можно с миниатюрами как-то выводить???
Имеется ввиду типа новостной крутилки?
Проблема прыгающей страницы при переключении табов в том, что в момент переключения сначала прячется содержимое всех табов, а потом показывается содержимое активного таба. В момент, когда содержимое всех табов спрятано – контента на странице становится меньше и браузер прокручивает страницу вверх. Когда новый таб появляется – скрол остается на той же странице.
Решение – не прятать все табы, а только ненужные:
Ну наконец-то рабочее решение. Огромное спасибо!
Только правильно будет так:
иначе при переключении табы исчезают.
Теперь осталось исправить весь скрипт с учетом всех доработок.. Скажем так.. сделать новую версию..
Добрый день. Столкнулся с проблемой.
Попытался прикрутить этот скрипт к joomla, и все получилось кроме одного НО. В firefox работает а в опера и хроме не хочет. Т.е просто клацая по табам не переключается, в чем может быть проблема?
На локальном браузере работает в опера без проблем.
Буду очень признателен за помощь.
Где можно посмотреть? Не видя живого примера, я не могу сказать причину.
Вот. Ссылка на тестовую страницу
Скорее всего конфликт с одним из множества подключенных скриптов. Нужно поочередно их отключать, чтобы выявить, с каким конкретно.
Зная основы jQuery, такие вещи можно пачками под себя писать и усложнять, не любит у нас народ матчасть, даже когда себе любимым делает. Вообще скрипт хороший, ничего лишнего не нашел.
Можно сделать второй вариант еще просто табы без кук.
Но выходит так, что кто-то пишет и помогает другим, а кто-то просто говорит что можно…
Дмитрий, спасибо за прекрасный плагин.
Вообще я использую практически все твои плагины, очень уж они просты и привлекательны :)
Прочитал все 20 страниц комментов в поисках одного решения, обнаружил, что не я один его ищу. А именно, клик на ссылку с якорем – открывается страница с активным нужным табом.
Спасибо за отзыв!
Сделал пример для вашего случая – click-to-activate.html#tab3
Спасибо, работает. Только по умолчанию последняя (у меня 5-я, в примере 4-я) вкладка открывается, а должна 1-я.
Исправил.
Огромное спасибо, Дмитрий! Удачи вам во всех направлениях :)
Пожалуйста и вам спасибо на добром слове! ;)
А свойство display: none; на поисковых роботов как влияет, не упадет ли рейтинг в google например?
В данном случае никаких санкций не будет. Я уже много лет использую.
Спасибо за пост. Очень полезно!)
Поменял для себя в скрипте событие click на mouseover, но проблема теперь в том что после убирания мышки продолжает отображатся та вкладка, на которую навёл. Как можно сделать и что необходимо добавить в скрипт, чтобы после отвода мышки происходил возврат к отображению вкладки по умолчанию (current)? Заранее спасибо.
используйет hover
*используйте (жаль нельзя комментарии редактировать.)
Вот пример – http://jsfiddle.net/Dimox/4CB3Z/. Используется дополнительный класс
default.Спасибо, вроде бы всё работает правильно, но глючит. При хождении мышкой по вкладкам по горизонтали, скрипт бывает открывает сразу несколько блоков один под другим, тоесть как бы не успевает прятать тот что по умолчанию.
На знаю, к сожалению, как с этим справиться.
Скажите, все элементы грузятся сразу или подгружаются по мере переключения по вкладкам ?
Все сразу.
Жаль, будем искать )чтоб не сразу(
скажите а ка сделать так чтобы shadowbox нормально работал когда указываешь ссылку с якорем. А то у меня получается что без якоря работает нормально а с якорем оно просто открывает в новой странице а не как надо.
Дима, большое спасибо за скрипт! Использую его по возможности на своих проектах :)
На одном возникла проблема:
Заранее неизвестно сколько вкладок будет и какая их них первая будет.
Тем самым я не могу прописать стили current и box visible для блоков.
Возможно как-то на jquery усовершенствовать скрипт?
Добавьте эти строки перед скриптом:
Отлично, все работает.
Спасибо вам за ваши труды!
Пожалуйста!
Интересно знать в этих табах кросс-браузерная поддержка?
в табах которые display:none т.е 2,3,4 и тд, можно ли сделать чтобы допустим картинки которые в них ну и весть контент подгружался только при открытии 2, 3 , 4 итд вкладки . Так я думаю будет лучше
Естественно.
Вам нужно искать другой скрипт с подобной функций. Мой этого не умеет.
А как сделать за место горизонтального меню выпадающее меню при клике
Блин как этот косяк в Firefox в верстке исправить в ваших вкладках? http://s018.radikal.ru/i511/1208/0c/19c80d00a241.jpg
Привет! Подскажи, как забиндить выполнение некой функции на конкретную вкладку?
$(‘li’).get(6).click(function(){функция}); – не помогает, вкладка становится постоянно активной.
Непонятно, что ты хочешь сделать.
Я хочу при нажатии на определённый таб выполнить некую функцию, в моём случае запустить видеофайл.
Вот так:
либо так:
почему-то не сработало… Может по причине того что блоков с вкладками несколько?
вот так сработало $(‘li’).eq(6).click(function(){alert(‘!’);});
Подскажите пожалуйста. У меня всего 2 динамические вкладки. При переходе с current на вторую все отлично, при возврате промигивает контент в боксе. Как будто веб-страница обновляется
Покажите живой пример.
Огромная благодарность! Как часы!
не работает на DLE.
Вписал в меин тпл инклуды 2 джс, это гугла и самого скрипта, попробовал использовать код табов (дивы которые) при создании стат страницы – не помогло. Внес эти дивы в static.tpl тоже 0 реакции.
По факту как проявляется 0 реакции – как будто никаких яваскриптов и нету. абсолютный 0. Что делать? кто пробовал на дле это вставлять?
Работает все на DLE. Во всяком случае, на 9.2 – точно. Никаких дополнительных библиотек не подключал. Только добавил скрипт переключения табов ( создал файл libs.js со скриптом в папке шаблона js и подключил в main.tpl в ) и все по инструкции.
Дмитрий добрый день.
В посте №304 Вы давали ссылку на пример, где вкладки были отдельно от самого содержимого этих вкладок? (Как разнести их по разным DIV’ам)
Например, вкладки в хедере, а содержимое при их переключении меняется в левом столбце…
Но к сожалению файлообменник пишет «Закончился срок хранения файла. Файл удален с сервиса.»
Можно выложить еще раз этот пример.
Заранее спасибо!
Читайте тут.
Спасибо