Создаем удобные, практичные вкладки с помощью jQuery
Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью “Универсальный jQuery-скрипт для блоков с вкладками (табами)“.
* * *
Примерно последние месяц-два на англоязычных блогах мне стали попадаться на глаза блоки в сайдбаре, переключаемые с помощью вкладок-табуляторов, которые, судя по всему, становятся все популярнее.
Чтобы сразу было ясно, о чем я веду речь, загляните в сайдбар моего блога, там есть несколько таких блоков, например, “Облако рубрик” и “Облако тегов“. Их полезность заключается в том, что они позволяют существенно сократить площадь, занимаемую информацией, выводимой в сайдбаре. К тому же это оригинально и красиво.
Примеры
- Как я уже сказал выше, вкладки есть прямо в моем блоге.
- Специальный отдельный пример (который можно скачать ниже).
Скачать
Удобные, практичные вкладки с помощью jQuery
Загрузок: 5753 | Размер: 18 Кб
А теперь я расскажу, как легко и просто прикрутить к свому блогу специальный скрипт, который позволяет это изящество реализовать. На мои глаза попадались разные вариации создания подобных вкладок и я выбрал, на мой взгляд, самый простой из них.
Итак, приступим.
-
В первую очередь нам потребуется популярная сегодня библиотека jQuery. Рекомендую скачать упакованную версию, которая занимает примерно 30 килобайт.
Копируем ее в папку с шаблоном блога и подключаем следующим кодом:
<script type="text/javascript" src="имя_файла.js"></script> -
Затем нужно создать в сайдбаре блоки, которые будут переключаться с помощью закладок:
<ul class="tabs tabs1"> <li class="t1 tab-current"><a>Первая вкладка</a></li> <li class="t2"><a>Вторая вкладка</a></li> </ul> <div class="t1"> контент первого блока </div> <div class="t2"> контент второго блока </div> -
CSS-стили можно увидеть в исходном коде страницы примера. Здесь я только хочу отметить, что для тех контентных блоков, которые по умолчанию скрыты, нужно указать соответствующее CSS-правило:
div.t2, div.t3, div.t4 {display: none}Это необходимо на случай, когда у пользователя отключена в браузере поддержка JavaScript, иначе все блоки станут видны.
-
Теперь осталось подключить (по аналогии с jQuery) совсем небольшой скрипт, который и позволяет нам переключать закладки. Выглядит он следующим образом:
var $j = jQuery.noConflict(); $j(document).ready(function() { $j('ul.tabs li').css('cursor', 'pointer'); $j('ul.tabs.tabs1 li').click(function(){ var thisClass = this.className.slice(0,2); $j('div.t1').hide(); $j('div.t2').hide(); $j('div.' + thisClass).show(); $j('ul.tabs.tabs1 li').removeClass('tab-current'); $j(this).addClass('tab-current'); }); });
На что прошу обратить внимание. Такие классы, как tabs1, t1, t2, должны быть уникальными. Т.е. если вы хотите создать, например, 2 отдельных блока с двумя вкладками в каждом, то для первого классами будут: tabs1, t1, t2, для второго: tabs2, t3, t4. Естественно, эти классы можно обозвать как угодно, главное – чтобы они не повторялись от блока к блоку.
При увеличении количества вкладок или блоков с вкладками, параметры в скрипт добавляются по аналогии, думаю, в этом не сложно разобраться.
Internet Explorer
Он, как всегда, отличился. Поскольку у тега ссылок во вкладках не используется параметр href (дабы при клике на них экран не прокручивался), IE6 и IE7 не воспринимают прописанные CSS-правила при наведении курсора на вкладку (не знаю почему, но в IE7 на моем блоге это работает).
Заключение
Как вы наверняка заметили (если посмотрели исходный код страницы примера), работа по реализации таких вкладок завязана на использовании CSS, т.е. установка скриптов занимает самую малую часть процесса, основную же часть составляет прописывание каскадной таблицы стилей, которая придаст вкладкам нужное оформление.
В примере все настроено так, что, если у посетителя отключена поддержка JavaScript, он увидит информацию из первой вкладки. Поэтому на такой случай рекомендую в первой вкладке вставлять наиболее важный контент.
* * *
Компания “Экослип” предлагает большой выбор экологически чистых товаров для спальных комнат: кровати из массива, ортопедические основания и подушки, матрасы разных типов и другую мебель от лучших производителей.
Смотрите также
Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...
Универсальный jQuery-скрипт для блоков с вкладками (табами)
Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому ...
jQuery-cкрипт "Добавить в закладки"
Данный скрипт – это усовершенствованная версия JS-скрипта “Добавить в закладки”, который я представил читателям более года назад. Прежде всего хочу поблагодарить Женю Самборского за то, что помог мне его “добить”. ...
Скрипт предпросмотра комментария с помощью jQuery: вариант 2
Сегодня предлагаю вам второй вариант моего скрипта для предпросмотра комментария. Смотрим готовый пример. Скрипт находится в исходном коде данного примера. Прошу обратить внимание, что для полноценной настройки скрипта под ваш ...
Комментарии (50)
У меня почему-то при входе на страницу содержимое сразу двух вкладок вылезает. а потом когда нажмешь на одну из вкладок – всё нормально, и вскрываются они попеременно.
Значит либо не написан стиль из 3-го пункта, либо что-то неправильно изменили в скрипте.
Help! Подскажите как сделать чтобы вкладка оставалась активно даже после обновления страницы как сделано на http://new.skoda-auto.com/COM/innovation/design/Pages/skodadesign2.aspx либо на http://www.skoda-avto.ru/pub.html?docid=3319. Буду очень благодарен
Dimox,
$j(‘ul.tabs.tabs1 li’).click(function(event){
var thisClass = this.className.slice(0,2);
$j(‘div.t1’).hide();
$j(‘div.t2’).hide();
$j(‘div.’ + thisClass).show();
$j(‘ul.tabs.tabs1 li’).removeClass(‘tab-current’);
$j(this).addClass(‘tab-current’);
event.preventDeafult();
});
});
А в href писать что-либо. )
*preventDefault();
;)
А у меня вот глюк! Работаю с системой Битрикс. Понять не могу где косякнул, 8 раз код пересмотрел, понял что в css, а как избавится не знаю. Может есть кто помочь может?
Rust, если ещё актуально – у меня тоже “Битрикс”. Всё работает. В чём глюк?
А я , извините, не понял как подсоединить к каждому табу определенные виджет, работаю на WordPress, напишите доступно пожаллста.
Все, у меня получилось, спасибо, разобрался. Расту:-)
А кто нибудь знает как индексируется данный трюк? по первой таблице или в общем?
Текст индексируется во всех вкладках.
хм, так и не понял куда подключать 4 шаг? И как?
Как подключить разобрался ^^ Только есть проблема. Работаю с форумом vbulletin. И в нем когда я вставляю скрипт из 4 пункта, корячит весь шаблон, т.е у меня на главной 3 столбца с инфой, а при подключении сего скрипта все уходит в 1 колонку.
Покажите пример.
А динамически можно создавать вкладки как на http://i.pr-cy.ru/panel.php
В этом скрипте – нет.
подскажите как добавить еще один элемент, например ссылку или кнопку при нажатии которой открывалась бы предположим третья вкладка?
$j(‘#link’).click(function(){
$j(‘div.t1’).hide();
$j(‘div.t2’).hide();
$j(‘div.t3’).hide();
$j(‘div.t4’).show();
$j(‘ul.tabs.tabs1 li’).removeClass(‘tab-current’);
$j(‘li.t4’).addClass(‘tab-current’);
});
Супер!!!!!!!
Огромное спасибо за метод)
А как сделать ссылку например на вторую вкладку??
Если имеете в виду сделать по умолчанию активной вторую вкладку, тогда из
<li class="t1 tab-current">нужно перенестиtab-currentв тег второй вкладки, ну и вместоdiv.t2 {display: none}сделатьdiv.t1 {display: none}.Спасибо за ответ.
Нет, по умолчанию я хочу первую вкладку. Но на другой странице сайта необходимо сделать ссылку на вторую вкладку.
Т.е. у меня на другой странице две ссылки:
1) на страницу, где по умолчанию открывается первая вкладка
2) на эту же страницу где откроется вторая вкладка.
Пока писал понял :)
Можно передать условие и применить стиль где будет . Так?
Мне непонятно, что вы хотите сделать.
сделал на странице четыре разных блока с вкладками, все отлично работает…
делаю пятый и он не работает, при открытии страницы открывается первая вкладка, но при нажатии на нее или на вторую все пропадает, получается отрабатывает:
$(‘div.tm1’).hide();
$(‘div.tm2’).hide();
и не отрабатывает:
$(‘div.’ + thisClass).show();
но на четырех других работает… код одинаковый…
Покажите пример, без него ничего не смогу подсказать.
это работает:
ЗападВосток
бла-бла
бла-бла
$(‘ul.tabs.tabs3 li’).click(function(){
var thisClass = this.className.slice(0,2);
$(‘div.t5’).hide();
$(‘div.t6’).hide();
$(‘div.’ + thisClass).show();
$(‘ul.tabs.tabs3 li’).removeClass(‘tab-current’);
$(this).addClass(‘tab-current’);
});
это не работает:
ЗападВосток
бла-бла
бла-бла
$(‘ul.tabs.tabsm li’).click(function(){
var thisClass = this.className.slice(0,2);
$(‘div.tm1’).hide();
$(‘div.tm2’).hide();
$(‘div.’ + thisClass).show();
$(‘ul.tabs.tabsm li’).removeClass(‘tab-current’);
$(this).addClass(‘tab-current’);
});
В
slice(0,2)замените 2 на 3.спасибо!!!
а можно как-нибудь сделать так чтоб вкладки были с боку?
C помощью CSS их можно как угодно расположить.
не знаток HTML, а CSS тем более :(
ок.
просто не знаток HTML, а CSS тем более :(
Такая шляпа:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(‘ul.tabs li’).css(‘cursor’, ‘pointer’);
$j(‘ul.tabs.tabs1 li’).click(function(){
var thisClass = this.className.slice(0,2);
$j(‘div.t1’).hide();
$j(‘div.t2’).hide();
$j(‘div.t3’).hide();
$j(‘div.t4’).hide();
$j(‘div.t5’).hide();
$j(‘div.t6’).hide();
$j(‘div.t7’).hide();
$j(‘div.t8’).hide();
$j(‘div.t9’).hide();
$j(‘div.t10’).hide();
$j(‘div.t11’).hide();
$j(‘div.’ + thisClass).show();
$j(‘ul.tabs.tabs1 li’).removeClass(‘tab-current’);
$j(this).addClass(‘tab-current’);
});
});
вместо десятой вкладки вызывается первая, одиннадцатая – вообще не вызывается.
Голову сломал – не помогло :-)
Help!
А дай, думаю, воспользуюсь советом №44 – так ведь помогло!
В двух словах, если можно, поясните: что произошло?