Очень часто на многих сайтах встречаются вкладки, которые позволяют сэкономить место и, по желанию посетителя, показать им больше информации.
То есть можно на одной странице разместить информацию, которая обычно занимала бы 3-5 страниц. Вкладки незаменимы в такой ситуации. В прежних уроках у нас уже были подобные примеры, но плагинов для вкладок огромное количество. Я постараюсь показывать Вам самые лучшие и полезные.
Начнем, пожалуй, с конца - c HTML.
<ul class="tabset_tabs">
<li><a href="#tab1" class="active">Вкладка 1</a></li>
<li><a href="#tab2">Вкладка 2</a></li>
<li><a href="#tab3">Вкладка 3</a></li>
</ul>
<div id="tab1" class="tabset_content">
<h2 class="tabset_label">Вкладка 1</h2>
Содержание Вкладки 1
</div>
<div id="tab2" class="tabset_content">
<h2 class="tabset_label">Вкладка 2</h2>
Содержание Вкладки 2
</div>
<div id="tab3" class="tabset_content">
<h2 class="tabset_label">Вкладка 3</h2>
Содержание Вкладки 3
</div>
Все вкладки необходимо создавать подобным образом. Для начала создаем список со всеми вкладками. Если хотим сделать, чтобы определенная вкладка сразу была открыта для пользователей, ей необходимо присвоить класс "active". Далее по каждой отдельной вкладке создаем слои. Обязательно для каждого слоя прописываем класс "tabset_content". После тега <div> идет тег заголовка <h2> с классом "tabset_label". Он необходим для правильной работы вкладок, однако не отображается на экране.
Теперь необходимо добавить между тегами <head></head> следующие строки:
<script type="text/javascript" src="addclasskillclass.js"></script>
<script type="text/javascript" src="attachevent.js"></script>
<script type="text/javascript" src="addcss.js"></script>
<script type="text/javascript" src="tabtastic.js"></script>
Тут мы добавили все необходимые скрипты для правильного функционирования. Получилось немного наляписто (целых 4 внешних файла), однако мне нравится полученный результат. Обратите внимание на пути к скриптам, и помните, что при перемещении файлов их необходимо менять (пути).
Также в исходниках у нас имеется таблица стилей, но ее прописывать в файле не обязательно, так как она автоматически подгружается через Javascript.
Вот и все готово! По-моему, вышло очень неплохо! Такие вкладки могут пригодиться при создании мини сайтов с описанием товаров, сервисов. Также можно сделать простой сайт-визитку. Удачи!