Шаг 1. HTML-конструкция: Итак, для начала нам нужно составить html-конструкцию нашей таблицы со вкладками. Выглядеть она будет примерно так:
HTML:
Code
<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>
Теперь нам нужно к нашему документу со вкладками присоединить каскадную таблицу стилей. Она вынесена в файл style.css. Поэтому просто подключим его к нашему индексному файлу следующим образом:
Code
<link type='text/css' href='style.css' rel='stylesheet' />
Теперь, как и в любом уроке по jQuery мы должны подключить основной фреймворк jQuery. Для этого между тегами <head> и </head> вставим следующий код:
Code
<script src='jquery.js' type='text/javascript'></script>
Теперь для полноценной работы вкладок мы должны вставить перед закрытием тега body следующий jQuery-код:
jQuery
Code
<script>
$(function() {
$("ul.tabs").tabs("div.panes > div");
});
</script>
Вот и готова наша табличка со вкладками. Думаю такое вид вкладок будет Вам по душе. Спасибо за внимание, до новых встреч! Пример
