Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью “Универсальный jQuery-скрипт для блоков с вкладками (табами)“. * * * Примерно последние месяц-два на англоязычных блогах мне стали ...
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...
На своем другом блоге я недавно объяснил, почему в данный момент кнопка “Google +1” не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на ...
Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим ...
Комментарии (978)
Доброго времени суток
http://nashe.eu/
Есть такой сайт.
Я для новостей мероприятий использовала табы, удобные и простые.
Но возникла проблема, если я даю вот такую ссылку http://nashe.eu/#splin-3, открывает все время первый :(
Извините, забыла дописать, а когда я применяла 3-ий способ, то если люди заходили уже на сайт и была они на другой вкладке, то если кидаешь эту, им открывалась предыдущая…
Нужно использовать скрипт из 4-го примера.
Пробовала, но тогда совсем не переключается :(
Сейчас его например включила, можете посмотреть
так… немного не так поставила, но при переходе по http://www.nashe.eu/#lyapis98 все равно открывается первый Т_Т
Можно использовать только якорь вида
#tab1, меняя цифру.А обязательно #tab1? #tab1 не подойдет?(
Надо сделать якорь внутри tab__content получает?
Ничего не понял. Делайте по аналогии с примером.
Смотрите, сейчас у меня в tabs__caption стоит ссылка на где kenigsze — это альт-нейм страницы(использую как ярлык)
По 4-ому методу в tabs__content должен быть якорь , так?
Я просто не знаю как прописать, чтобы tab менял цифры на автомате Т_Т и думала может можно было сделать ? ((
P.S.: Комментарий ниже удалите, не туда отправила ><
При переходе по ссылке вида http://www.nashe.eu/#tab4 откроется 4-я вкладка, и аналогично со всеми остальными. Вот и вся суть. Никакие якори не нужны.
Проблема в том, что #tab(n) не устраивает в адресной строке :(
Тогда вам этот скрипт не подходит.
Можете помочь как-то изменить скрипт? Т_Т
Убрать #tab(n) в адресной строке:
$(‘a[href*=#tab]’).click(function(e) {
var tabIndex = $(this).attr(‘href’).replace(/(.*)#tab/, ”)-1;
$(‘ul.b-tabs__caption li’).eq(tabIndex).click();
e.preventDefault();
});
На всех проектах использую данный код, спасибо большое!)
Аналогично предыдущему автору комментария, использую данный код всегда и везде уже года 4
Так если вкладки и табы создаются migx автоматически, о каком ручном присвоении класса может идти речь? Если они по умолчанию получаются все не активные
Нужно, что бы скрипт по умолчанию первому элементу присваивал активность
Дмитрий, спасибо за скрипт.
Подскажи, пожалуйста, можно ли сделать так, чтобы на первом табе отображалось содержимое всех табов?
Хочу сделать табы для портфолио по структуре:
[Все] [Дизайн] [Программирование] [Копирайтинг]
Такое скрипт не предусматривает.
Спасибо большое за скрипт! Могли бы Вы подсказать, нет ли возможности передавать класс activ именно первому элементу в списке ?
Использую DLE, там есть несколько полей, в зависимости от того, заполнены они или нет, появляются табы, и допустим есть первый таю с классом activ не выведен, то остальные табы так же нельзя увидеть.
Проще говоря, как передавать класс activ первому доступному табу ?
После строк:
добавьте:
Спасибо Вам большое! Как можно поддержать Ваш проект средствами ?
Пожалуйста. Добавил в статью форму доната под блоком “Скачать”.
Отправил немного, спасибо еще раз за помощь!
P.s – не подскажете в какую сторону копать, если нужно при переключении табов, вырубать встроенный iframe в таб, в том случа если это Media, Допустим Iframe с ютуба ?
Просто если в разных табах несколько разных iframe вк или ютуб, при включании одного из них и при переходе на другой, пользователь может включить два плеера одновременно.
Понимаю что это уже не к Вам, но возможно с Вашим опытом можно что то подсказать.
С подобным не сталкивался, к сожалению.
А за что спасибо, когда вкладку li не становится активной. И вообще этот копирайт зачем тут размещать да ещё и так дурно. Пишите свой.
Уже писал спасибо автору скрипта, но мне не хватало анимированного перехода между табами, я немножко изменил скрипт вот что вышло. В код js добавлены fadeIn/fadeOut и delay(), для анимации табов, в css изменения минимальны, заменяем класс active на :first-of-type для того чтобы показывался первый таб по умолчанию.
Пример в действии можно посмотреть на jsfiddle
СПАСИБО!
Как мне кажется, если изобретать колесо, то колесо адаптивное.
А то как неловко получается- табы не адаптивные, а весь сайт и в том числе табы “Похожие статьи” и “Рубрики” адаптивные. и если смотришь с телефона, то предлагаемое решение смотрится как костыль.
Не настаиваю, но куда лучше было бы сделать на примере того, что встроено в блог, но написать самому с нуля и вырезать лишний код.
Отличный скрипт, спасибо! Дмитрий, подскажите, а как доработать первый вариант скрипта, чтобы продублировать вкладки (табы) сверху и снизу блока. Например, в мобильном блок очень длинный и чтобы не прокручивать наверх, хочу сделать дубликат вкладок.
огромное,- хотелось сказать денежное спасибо, но к сожелению на твоем ящике отсутствует реквизит “муравейника”, а по чужих ложить знаешь сам очень дорого;- просто огромейше спасибо за код, поставил все работает, а то если самому, да я учу джаваскрипт, то с моимы темпами, это бы произошло как ты и сам прекрасно понимаешь – “с тех пор прошло 2 года”, вот так!
Вместо
(function($) {
$(function() {
Можно написать
jQuery(function($){
Было бы здорово сделать адаптивность. Например на 480px превращать в аккордион.
Супер! Спасибо вам огромное! Вкладки, создающиеся на лету по ссылкам + запоминание позиции – то, что я искал!
Скажите, а можно добавить еще возможность закрывать после прочтения ненужные кладки?
И еще, можно ли как-то прикрутить ко вкладкам какой-то параметр, чтобы на них можно было сослаться и отправить как ссылку ?
Не понял, как это.
4-й пример.
Добрый день.
Спасибо за код. Использую его постоянно.
Подскажите, как сделать плавное появление табов при переключении?
Спасибо!
Спасибо. Нашел нужный код чуть выше.
использую код в админке wordpress (в интерфейсе плагина).
сохраняю открытый таб в localStorage
к сожалению – видно, что активная первая вкладка – и только потом скрипт переключает на сохраненную.
нет ли какого способа генерировать html-код с уже правильной активной вкладкой?
ну чтобы избавиться от видимого прыжка.
Вряд что-то с этим можно сделать, потому что в админке WordPress подключается много разных скриптов, и все это долго обрабатывается.
Здравствуйте! А можете подсказать, как сделать вкладки внутри каждой вкладки? Я вставляла предлагаемые Вами код в код каждой вкладки. По итогу отображается только первая активная вкладка, остальные не переключаются. Понимаю, что нужно что-то в коде поправить, но не могу догнать,что именно. Помогите, пожалуйста.
http://dvernik.by/vhodnayadver-k69
Решение здесь.
Спасибо огромное! Вы круты!
Добрый день как отвязать якоря от tab(n), чтобы по ссылке #anchor-name переходило на нужную вкладку с якорем например по ID
Здравствуйте.
Еще не пробовала ваш скрипт, но хочу сказать по поводу “изобретать колесо”: jquery-ui хорошая штука, но у него есть недостатки. Конкретно табы не имеют отличительного класса “активный-не активный”, только навигация. Из-за этого нельзя влиять на них с помощью CSS, а дизайнеры бывает такое нарисуют или заказчик придумает, что приходится “ломать” стандартную работу скрипта и класс тут очень будет кстати.
Так что изобретайте и дальше, все пригодится )))
Может быть уже писали не могу найти, как в этом примере вкладок сделать автоматическое переключение между вкладками?