| В последнее время на многих блогах стали использовать блоки в сайдбаре, переключаемые с помощью вкладок. Во-первых для экономии места, а во-вторых, это просто красиво. Далее описан простой способ создания таких вкладок при помощи jQuery. Сначала подключаем библиотеку jQuery и файл стилей в разделе head HTML-документа: Code <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" /> Добавляем сами вкладки на страницу: Code <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> </div> <div id="second"> Содержание второй вкладки</p> </div> <div id="third"> Содержание третьей вкладки</p> </div> </div> А теперь небольшой скрипт (файл tabs.js), который позволит нам переключать вкладки. Code $(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();
});
|
