Для экономии места на странице или для того, чтобы собрать некоторые материалы в группу по смыслу, используют закладки (табы). Разбиение содержимого на закладки – отличный способ решения проблемы нехватки места, особенно если речь идет, например, о главной странице сайта. Опишем подробно, как реализовать закладки при помощи библиотеки jQuery. Здесь приведено не только описание, но и все необходимые файлы для создания работающих закладок.

• Первая
• Вторая
• Третья

Для начала скачайте скрипт по ссылке: jquery.tools.min.js

Затем загрузите его на ваш сайт подключите его в заголовке страницы, указав ваш путь к скрипту.

<script src="/tabs/jquery.tools.min.js"></script>

Затем скачайте и загрузите на ваш сайт css-стиль: tabs.css

Теперь подключите стиль используя код, приведенный ниже. Не забудьте изменить путь к файлу на свой.

<link rel="stylesheet" type="text/css" href="/tabs/tabs.css"/>

Теперь вам понадобится изображение, которое вы может скачать по ссылке ниже. Загрузите изображение на ваш сайт. В скачанном ранее файле стиля не забудете поменять путь к этому изображению: blue.png

В заголовке страницы на которой будет размещена вкаладка, впишите еще один фрагмент стиля, приведенный ниже. Меняя это файл, вы сможете настроить ваши вкладки.

<style> /* tab pane styling */ .panes div { display:none; padding:15px 10px; border:1px solid #999; border-top:0; height:100px; font-size:14px; background-color:#fff;} </style>

Теперь надо сформировать содержимое и структуру ваших вкладок. Для этого воспользуйтесь шаблоном, приведенным ниже. Расплагайте код там, где вы хотите видеть ваши вкладки на странице.

<!-- the tabs --> <ul class="tabs"> <li><a href="#">Первая</a></li> <li><a href="#">Вторая</a></li> <li><a href="#">Третья</a></li> </ul> <!-- tab "panes" --> <div class="panes"> <div>Текст первой вкладки</div> <div>Текст второй вкладки</div> <div>Текст третьей вкладки</div> </div>

Последний шаг: внизу страницы под структурой и содержимым вкладок разместите скрипт.

<script> $(function() { div directly under div.panes $("ul.tabs").tabs("div.panes > div"); }); </script>

Ну и безусловно, все это будет работать только если у вас установлена или подключена библиотека jquery. Если не подключена и не установлена, то просто вставьте на страницу в заголовке следующий скрипт.

<script src="http://yandex.st/jquery/1.6.2/jquery.min.js"></script>