GauraStyle
SeoPlus.com.ua
- Регистрация
- 13 Фев 2007
- Сообщения
- 1.512
- Реакции
- 939
- Автор темы
- #1
Вкладки с использованием jQuery
В последнее время на многих блогах стали использовать блоки в сайдбаре, переключаемые с помощью вкладок. Во-первых для экономии места, а во-вторых, это просто красиво. Далее описан простой способ создания таких вкладок при помощи jQuery.
Сначала подключаем библиотеку jQuery и файл стилей в разделе head HTML-документа:
Добавляем сами вкладки на страницу:
А теперь небольшой скрипт (файл tabs.js), который позволит нам переключать вкладки.
Скачать:
Автор: ko1yan
В последнее время на многих блогах стали использовать блоки в сайдбаре, переключаемые с помощью вкладок. Во-первых для экономии места, а во-вторых, это просто красиво. Далее описан простой способ создания таких вкладок при помощи jQuery.
Сначала подключаем библиотеку jQuery и файл стилей в разделе head HTML-документа:
PHP:
<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" />
PHP:
<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>
PHP:
$(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();
});
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
Автор: ko1yan