Универсальный jQuery-скрипт для блоков с вкладками (табами)
Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Комментарии (978)
Прежде всего хочу выразить благодарность автору скрипта – скрипт очень полезный и весит мало. Вот столкнулся с такой задачей: у меня табы в разных списках UL – корректно выводится содержание только для первого и второго таба, при нажатии на третий таб выводит содержимое первого таба и т.д.
Неужели для каждого списка UL нужна прописывать функцию отдельно или есть какое-то решение?
Заранее благодарю за ответ.
Вот пример:
Я же в статье написал, какой должен быть html-код. У вас он другой, поэтому и не работает, как надо. Т.е. правильно будет так:
Да, я понимаю, что код у меня другой – табы до дизайну разложены в трех списках.
Вот поэтому я и задал вопрос – как это можно реализовать?
– через 3 отдельные функции к каждому из трех списков UL c разными классами, например tabs1, tabs2 и т.д?
– или возможно объединить три списка в один через js и уже затем его корректно обработать?
Подскажите, пожалуйста, как правильнее и оптимальнее?
P.S. Хотелось бы умное оптимальное решение, чтобы не раздувать функции js.
Вот что получилось у меня для кода из трех списков UL с табами:
Буду очень благодарен, если автор скрипта меня поправит, либо предложит более оптимальное решение для данного кода из трех списков.
Не знаю, как тут можно оптимизировать. Лучше изменить хтмл-код, чем так извращаться со скриптом.
у меня уже стоит скрипт http://mirant.kiev.ua/stuff/sports_channels/futbol_pljus/6-1-0-191 с вкладками которые сбрасываются после обновления странички, но нужен вариант с сохранением вкладки выбранной до обновления в чём их разница и что нужно добавить?
Спасибо уже разобрался сам, по ходу помог скрипт с сохранением cookies
Не работает со свежей версией jQuery (1.7).
У меня работает.
Молодец.
Привет. В общем возникла такая проблема. Хотел сделать вкладкиотом оказалоь, что они уже есть. Поставил в новость такие же вкладки но возникла проблема. При нажатии на 1ую вкладку в 1ом блоке, 2 вкладка во 2ом блоке сворачивается – чего быть не должно.. сменил стили вроде – тогда вкладка не работает, так как и там и там стиль tabs. поробовал поменять на tabs2 – не получилось – что делать, помогите плиз.
Где можно посмотреть (адрес страницы)?
да все уже, не нужно, конфликт был скриптов..выучше подскажите, где найти скрипт, для того, чтобы сохранялись закдадки? А то в коде просто cookies.js и фиг знает где лежат..
тьфу ты..нашел сразу же) по тому же адресу, что и пример, только не .хтмл а .js
путем нехитрых манипуляций делаем Ваш скрипт еще более универсальным
теперь можно создавать вложенные табы
Спасибо! Кому-то пригодится. Уже не раз спрашивали про такую возможность.
Доработайте скрипт. Например на сайте будут табы без вложенных табов и с вложенными. Так вот если вложенных табов нет скрипт не работает.
Что-то не то делаете. Этот код работает без проблем для обоих случаев. Рабочий пример – http://jsfiddle.net/yLLu7my0/
Добавляю изображение в содержание таба, и он перестает работать…
Dimox что делать, как реализовать?
Значит что-то неправильно делаете. Все должно работать.
Вот кусок кода именно при уменьшении картинки с помощью лайт бокс табы не работают
Применил на деле и оказалось очень удобно. Как-то я раньше даже не задумывался о прямом применении jQuery для табов. Все сторонние скрипты юзал, а так куда лучше!
СПАСИБО!
а как возможно навигацию сделать с правой стороны, подскажите?
Стили будут такими:
Огромное спасибо Вы меня выручили, теперь мой блог нормально выглядит. Ато использовал те скрипты о которых вам сказали в твиттере. Так там больше одного блока не разместить, и надо ждать секунд 3-4, пока прогрузятся и в итоге сайд тупит. А вот у вас четко написано, понятно и доступно, в общем идеальный вариант, спасибо.
Пожалуйста. Рад, что помог.
А какая строчка отвечает за смену цвета при наведении на вкладку, как поменять с желтого на другой ?
Вот эта:
#FFFFDF – это код цвета.
Спасибо
После всяческих экспериментов не работают другие скрипты внутри табов..
Например: галерея
Как подружить его с автоматизацией в ModX… Со слайдерами ротаторами все получается а с этими табами нет…
Значит вам придется поискать другой аналогичный скрипт. Я когда его разрабатывал, то не рассчитывал, что в блоках будут какие-то другие скрипты.
Второй день пытаюсь сделать у себя табы, так ничего и не получается. Создал файл со скриптом и залил в папку с темой, прописал в хидере и путь к яве на гугле и путь к файлу со скриптом. А вот создать нормальные табы в сайд баре не получается. Как мне их правильно прописать? как понимаю это в файле сайдбар.рнр? и стили в стили.css? Правильно?
Может такое быть – ява прописана в хидере но все равно не работает и как это можно исправить?
разве что js в браузере отключен, других вариантов не бывает
на других сайтах вижу, значит с браузером все в порядке. ок значит руки кривые и не правильно вставляю в свой бложик(
Наконец то установил работает))) Только не могу отцентровать текст по отношению к фону вкладок. text-align: center; – не помог. Может кто помочь?
Ребят, знаю только html и то так со справочником, прошу можете мне объяснить как мне установить эти вкладки под свой шаблон и по центру? Пожалуйста
я ставил в итоге методом проб и ошибок, в чужом коде и врагу не пожелаешь копаться. советую просто несколько вариантов установки рассмотреть, поэкспереминтировать с кодами. все получится, я также не сильно то шарю в кодах, однако смог). http://tolevbizsystems.com/wordpress/vkladki-na-bloge вот таким путем.
У меня не получилось. Выводятся вкладки вертикально, хотя хотелось бы горизонтально. И содержимое вкладок все отображается. Переключение между вкладками не работает. Стили, которые в этом посте указаны, добавила. В чем может быть проблема?
Дайте адрес страницы, где их установили.
Я делаю на локальном компьютере. Я уже пробовала такой скрипт jQuery UI. И все тоже самое. Может из-за темы?
Действительно из-за темы. Попробовала на другой теме и все получилось.
По теме перепрыгивания вверх при переключении табов.
В комментариях выше был модифицированный скрипт с определением высоты родительского блока, но если например в табы положить меню-аккордеон (оно там прекрасно работает), то при задании фона табам аккордеон будет вылазить за их пределы.
И так как вся соль заключается в установке определённой высоты блоку-родителю, можно поступить проще:
Мне лично помогла установка min-height для родительского блока табов.
проверял в ie7> и нормальных браузерах – вроде бы работает.
Спасибо за скрипт и подробное описание по установке. Установил – все работает!
Возник только 1 вопрос, самый последний WordPress (3.3 или как-то так) при обновлении показывал, что в него уже строен какой-то там jQuery в него уже встроен. Все равно нужно подключать гугловский?
Нет, не нужно.
У меня возникла следующая проблема: когда вкладка неактивная, то надпись начинается с первой позиции; когда навожу мышку на эту вкладку, то надпись смещается, т.е. между рамкой и надписью появляются отступы слева и справа. Получается, что вкладки начиная со второй прыгают, то левее, то правее. Подскажи, что нужно указать в стилях, чтобы этого не происходило. Стили я брала с примеров.
Возможно, что на это влияют другие стили сайта. Можно где-то посмотреть?
Я пока делаю на локальном компьютере. Не подскажите, как при выводе последних записей добавить дату и количество комментариев к записи, как у вас на сайте?
Вот так:
Спасибо огромное!