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