Здравствуйте. В сегодняшнем уроке Вы научитесь делать еще один очень интересный вид вкладок. Для начала посмотрите демо получившегося результата и скачайте исходные файлы:
Шаг 1. HTML-конструкция:
Итак, для начала нам нужно составить html-конструкцию нашей таблицы со вкладками. Выглядеть она будет примерно так:
HTML:
<ul class="tabs">
<li><a href="#">1-ая вкладка</a></li>
<li><a href="#">2-ая вкладка</a></li>
<li><a href="#">3-я вкладка</a></li>
<li><a href="#">4-ая вкладка</a></li>
<li><a href="#">5-ая вкладка</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div><h2>Первая вкладка.</h2>
<p>
Содержимое первой вкладки.
</p>
</div>
<div class="les"><h2>Вторая вкладка.</h2>
<p>
Содержимое второй вкладки.
</p>
</div>
<div class="les"><h2>Третья вкладка.</h2>
<p>
Содержимое третьей вкладки.
</p>
</div>
<div class="les"><h2>Четвертая вкладка.</h2>
<p>
<p>
Содержимое четвертой вкладки.
</p>
</div>
<div class="les"><h2>Пятая вкладка.</h2>
<p>
Содержимое пятой вкладки.
</p>
</div>
</div>
Шаг 2. Дизайн файла со вкладками
Теперь нам нужно к нашему документу со вкладками присоединить каскадную таблицу стилей. Она вынесена в файл style.css. Поэтому просто подключим его к нашему индексному файлу следующим образом:
<link type='text/css' href='style.css' rel='stylesheet' />
Шаг 3. Подключение основного фреймворка jQuery
Теперь, как и в любом уроке по jQuery мы должны подключить основной фреймворк jQuery. Для этого между тегами <head> и </head> вставим следующий код:
<script src='jquery.js' type='text/javascript'></script>
Шаг 4. jQuery-доработки
Теперь для полноценной работы вкладок мы должны вставить перед закрытием тега body следующий jQuery-код:
jQuery
<script>
$(function() {
$("ul.tabs").tabs("div.panes > div");
});
</script>
Заключение.
Вот и готова наша табличка со вкладками. Думаю такое вид вкладок будет Вам по душе. Спасибо за внимание, до новых встреч!
С искренним уважением, Максим Курочкин