Вкладки с использованием jQuery
В последнее время на многих блогах стали использовать блоки в сайдбаре, переключаемые с помощью вкладок. Во-первых для экономии места, а во-вторых, это просто красиво. Далее описан простой способ создания таких вкладок при помощи jQuery.
Сначала подключаем библиотеку jQuery и файл стилей в разделе head HTML-документа:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tabs.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="tabs.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Добавляем сами вкладки на страницу:
<div class="tabs">
<!–- tabs -–>
<ul class="tabNavigation">
<li><a href="#first">Первая</a></li>
<li><a href="#second">Вторая</a></li>
<li><a href="#third">Третья</a></li>
</ul>
<!–- tab containers -–>
<div id="first">
<p>Содержание первой вкладки</p>
</div>
<div id="second">
<p>Содержание второй вкладки</p>
</div>
<div id="third">
<p>Содержание третьей вкладки</p>
</div>
</div>
<!–- tabs -–>
<ul class="tabNavigation">
<li><a href="#first">Первая</a></li>
<li><a href="#second">Вторая</a></li>
<li><a href="#third">Третья</a></li>
</ul>
<!–- tab containers -–>
<div id="first">
<p>Содержание первой вкладки</p>
</div>
<div id="second">
<p>Содержание второй вкладки</p>
</div>
<div id="third">
<p>Содержание третьей вкладки</p>
</div>
</div>
А теперь небольшой скрипт (файл tabs.js), который позволит нам переключать вкладки.
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
d13:
Спасибо за наглядный пример. Как раз на одном региональном ресурсе у меня не хватка места. Вечером заюзаю. jQuery рулит в общем то.
26 Ноябрь 2008, 15:33admin:
jQuery рулит в общем-то.
26 Ноябрь 2008, 15:56Однозначно
d13:
Пытаюсь совместить календарь и архив на http://gomelwest.info, но пока мало успешно >_<
26 Ноябрь 2008, 21:48admin:
А что не получается? В общем-то, нам надо только в шаблоне прописать путь до библиотеки jQuery и добавить небольшой скрипт для переключения вкладок.
27 Ноябрь 2008, 11:04Игорь:
попробова заменить tabContainers.hide().filter(’:first’).show(); на tabContainers.hide().filter(’:second’).show(); получил ошибку(((
15 Декабрь 2008, 11:59admin:
Игорь, я так понял, что нужно сделать стартовой вторую вкладку? Если да, то боюсь вы не поняли смысл конструкции
tabContainers.hide().filter(':first').show();
Первая строка - мы отбираем всех детей div-элементов имеющих class=”tabs”. Вторая строка - применяем фильтр filter(’:first’), чтобы из всех детей отобрать только первых. В CSS существует такое понятие как псевдоэлементы. jQuery существенно расширяет способы обращения к элементам страницы. Но если есть такая конструкция как filter(’:first’), то это не значит, что есть конструкция filter(’:second’) или filter(’:third’). То, что один из наших контейнеров имеет id=”first” не имеет отношение к :first.
15 Декабрь 2008, 13:12jQuery – Javascript нового поколения
jQuery API: Traversing - обход DOM
Игорь:
То есть вы хотите сказать, что при такой реализации табов сделать открытой любую другую владку нельзя?:(
17 Декабрь 2008, 12:07admin:
Игорь, почему нельзя? Можно. Только надо немного знать jQuery:
// Получаем все div-элементы, которые являются детьми <div class="tabs">
var tabContainers = $('div.tabs > div');
// Получаем ссылки, которые расположены внутри <ul class="tabNavigation">;
// <ul class="tabNavigation"> расположен внутри <div class="tabs">
var tabNavigation = $('div.tabs ul.tabNavigation a');
// Скрываем все элементы tabContainers и делаем видимым второй
tabContainers.hide().eq(1).show();
// Делаем активной вторую вкладку (добавляем второму элементу <a> class="selected")
tabNavigation.eq(1).addClass('selected');
// Назначаем обработчик события для всех ссылок tabNavigation
tabNavigation.click(function () {
// Видимым будет div-элемент, id которого совпадает с якорем
// соответствующей ссылки
tabContainers.hide().filter(this.hash).show();
// Для всех ссылок удаляем class="selected" (хотя на самом
// деле class="selected" имеет всего одна ссылка)
tabNavigation.removeClass('selected');
// Для ссылки, по которой кликнули, добавляем class="selected"
$(this).addClass('selected');
return false;
});
});
Игорь:
Спасибо большое, помогло)))
18 Декабрь 2008, 15:40Лилу:
Вот мучаюсь, не могу понять в чем дело. В опере вообще это не работает…. А почему?
26 Январь 2009, 17:59maxim317:
Спасибо! Вклодочки действительно хорошо работают)
7 Февраль 2009, 4:16Но вот незадача. Причем она косается всех реализаций табов, которые я видел. Что делать, если на странице несколько раз изпользуются вкладки (в моем случае 3 раза, потом будет больше).
Проблемма такова: tab с id first, показывается первым только в первом случае, а с остальными табами не работает вообще, пока не кликнешь по нему. Вот наприме: http://irteam.ru/index/0-31
Не подскажите, как решить эту проблемку?
maxim317:
решил проблему)
9 Февраль 2009, 17:53правда очень алдово. просто скопировал несколько раз js и изменял в нем выбираемый class div, и в html тоже изменил.
Легион:
Таб довольно интересный, но все-таки не то, чего хотелось бы. Сейчас во многих шаблонах к WordPress идут другие табы, причем, они намного интересней. Вырвать его из шаблона не удалось, почему-то расположение становится абсолютно другим. Будет статья по построению таких табов и не для wordpress, а с поддержкой любых шаблонов html? Вот эта информация была бы интересней, хотя и данный таб достаточно интересен.
14 Апрель 2009, 15:27naualt:
Столкнулся с проблемой двойной вложенности вкладок, тоесть чтобы в див с содержимым вложить такую же по сути конструкцию из оглавления и содержимого…
26 Апрель 2009, 23:08Mindsaver:
Красиво получается. Только один минус что если первая вкладка пустая, то ничего не работает
19 Май 2011, 0:53