Использование закладок преследует две основные цели:

- дать возможность выделить ключевые разделы вашего сайта и осуществить удобную навигацию при помощи закладок;
- отображать на странице однородный текст в одном окне, но на нескольких страницах закладок без перехода на новую страницу.

В данной статье мы рассмотрим второй пример. Процесс создание панели закладок можно разбить на несколько частей:

- описание внешнего вида закладок при помощи HTML;
- написание скрипта, позволяющего манипулировать закладками;
- описание данных, которые будут расположенны на каждой странице закладки.

Скрипт панели закладок выглядит следующим образом:

< style>

.txt { font-family: verdana;
font-size: 11px;
padding-bottom: 6px;
cursor: pointer;
text-align: center;
border-right: 1px solid #444444;
border-bottom: 1px solid #444444;
background-color: #DEDEDE }

< /style>

< script language=JavaScript>

marks = new Array ("mark1", "mark2", "mark3", "mark4");
tops = new Array ("book1", "book2", "book3", "book4");

function mark(num) {

for ( i = 0; i < 4; i++ ) {

document.getElementById(tops[i]).src = "top_grey.gif";
document.getElementById(marks[i]).style.background = "#DEDEDE";
document.getElementById(marks[i]).style.borderBottom = "1px solid";

}

document.getElementById(tops[num]).src = "top.gif";
document.getElementById(marks[num]).style.background = "#FFFFFF";
document.getElementById(marks[num]).style.borderBottom = "0px";
document.getElementById("cont").innerHTML = document.getElementById("texts["+num+"]").innerHTML; 

} 

< /script>

< center>

< div id=bookmarks>

< table cellpadding=0 cellspacing=0>

< tr>
< td>< img src=top.gif width=90 id=book1>< /td>
< td>< img src=top_grey.gif width=90 id=book2>< /td>
< td>< img src=top_grey.gif width=90 id=book3>< /td>
< td>< img src=top_grey.gif width=90 id=book4>< /td>
< td>< /td>
< /tr>

< tr>
< td id=mark1 class=txt onclick='mark(0)' style='border-left: 1px solid #444444; border-bottom: 0px; background-color: #FFFFFF'>Описание< /td>
< td id=mark2 class=txt onclick='mark(1)'>Технология< /td>
< td id=mark3 class=txt onclick='mark(2)'>Пример< /td>
< td id=mark4 class=txt onclick='document.getElementById("bookmarks").style.display="none"'>Закрыть< /td>
< td style='border-bottom: 1px solid #444444; width: 30px'> < /td>
< /tr>

< tr valign=top>
< td colspan=5 style='border: 1px solid #444444; border-top: 0; height: 200px; width: 360px; padding: 16px; padding-top: 25px'>
< div id=cont style='font: 11px verdana'>
< /div>
< /td>
< /tr>

< /table>

< /center>

< div id=texts[0] style='display: none'>
Содержимое закладки 1
< /div>

< div id=texts[1] style='display: none'>
Содержимое закладки 2
< /div>

< div id=texts[2] style='display: none'>
Содержимое закладки 3
< /div>

< /div>

< script language=JavaScript>

document.getElementById("cont").innerHTML = document.getElementById("texts[0]").innerHTML;

< /script>

Если после просмотра скрипта у вас еще не пропало желание разобраться в нем, то я вам немного помогу. И так, первым делом мы создаем внешний вид закладок:

< table cellpadding=0 cellspacing=0>

< tr>
< td>< img src=top.gif width=90 id=book1>< /td>
< td>< img src=top_grey.gif width=90 id=book2>< /td>
< td>< img src=top_grey.gif width=90 id=book3>< /td>
< td>< img src=top_grey.gif width=90 id=book4>< /td>
< td>< /td>
< /tr>

Данный код описывает верхнюю часть закладок, которая представляет собой закругленные области. Обратите внимание, что первая активная закладка содержит картинку top.gif (рамка), а все остальные top_grey.gif (рамка с закрашенной областью). Каждая верхушка обязательно имеет своей имя (book1...book4).

< tr>
< td id=mark1 class=txt onclick='mark(0)' style='border-left: 1px solid #444444; border-bottom: 0px; background-color: #FFFFFF'>Описание< /td>
< td id=mark2 class=txt onclick='mark(1)'>Технология< /td>
< td id=mark3 class=txt onclick='mark(2)'>Пример< /td>
< td id=mark4 class=txt onclick='document.getElementById("bookmarks").style.display="none"'>Закрыть< /td>
< td style='border-bottom: 1px solid #444444; width: 30px'> < /td>
< /tr>

< tr valign=top>
< td colspan=5 style='border: 1px solid #444444; border-top: 0; height: 200px; width: 360px; padding: 16px; padding-top: 25px'>
< div id=cont style='font: 11px verdana'>
< /div>
< /td>
< /tr>

< /table>

Создаем непосредственно закладки. Каждая закладка имеет уникальное имя (mark1...mark4). При нажатии на закладку выполняется функция mark(), особенности которой мы сейчас и рассмотрим.

По умолчанию, при загрузке страницы у нас формируется массив данных

marks = new Array ("mark1", "mark2", "mark3", "mark4");
tops = new Array ("book1", "book2", "book3", "book4");

marks - массив имен закладок, tops - массив верхних областей закладок. Соответственно, количество закладок должно совпадать с размером массивов. То есть, если у вас шесть закладок, то массивые должны иметь по шесть элементов.

Функция mark() сначала обесцвечивает все закладки (вместо 4 в условии цикла, необходимо поставить количество закладок, если у вас, конечно, количество закладок не равно четырем):

for ( i = 0; i < 4; i++ ) {

document.getElementById(tops[i]).src = "top_grey.gif";
document.getElementById(marks[i]).style.background = "#DEDEDE";
document.getElementById(marks[i]).style.borderBottom = "1px solid";

}

а затем мы имзеняем внешний вид активизированной закладки (нажатой закладки):

document.getElementById(tops[num]).src = "top.gif";
document.getElementById(marks[num]).style.background = "#FFFFFF";
document.getElementById(marks[num]).style.borderBottom = "0px";

и изменяем содержимое страницы закладки:

document.getElementById("cont").innerHTML = document.getElementById("texts["+num+"]").innerHTML

Обратите внимание на переменную texts[num]. Само собой, содержимое не появится просто так. Его необходимо описать в виде контейнеров следующим образом:

< div id=texts[0] style='display: none'>
Содержимое закладки 1
< /div>

< div id=texts[1] style='display: none'>
Содержимое закладки 2
< /div>

< div id=texts[2] style='display: none'>
Содержимое закладки 3
< /div>

Каждый div имеет имя texts[0], text[1]...text[2]. Количество подобных divов должно быть не больше, чем количество закладок. В данном случае первые три закладки будут изменять свое содержимое. При этом divы не будут отображатся на экране display: none, а будут всего лишь хранить содержимое, которое будет передано объекту

document.getElementById("cont")

В самом конце необходимо присвоить содержимому закладки значение по умолчанию. По умолчанию у нас активна первая закладка, что мы, собственно, и указываем браузеру:

< script language=JavaScript>

document.getElementById("cont").innerHTML = document.getElementById("texts[0]").innerHTML;

< /script>