В последнее время на многих блогах стали использовать блоки в сайдбаре, переключаемые с помощью вкладок. Во-первых для экономии места, а во-вторых, это просто красиво. Далее описан простой способ создания таких вкладок при помощи 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" />
Добавляем сами вкладки на страницу:
<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.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();
});
