Иллюстрированный самоучитель по Adobe Golive
А пользователь, выбирая тот или
А пользователь, выбирая тот или иной переключатель, будет визуализировать соответствующий текст. Таким образом, когда отображается содержимое второй ячейки, не отображается содержимое третьей ячейки, и наоборот. Код подобного документа приведен в листинге 7.3, а результат — на рис. 7.3.
Листинг 7.3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>flMHaMM4ecKMe cTnrm</title>
<script language="javascript">
<! —
function chan_cont(x)
{
if (x==l) {pi.className="visible"; p2.className="hidden"};
if (x==2) {p2.className="visible"; pi.className="hidden"};
}
//-->
</script>
<style type="text/css">
.visible {visibility: visible}
.hidden (visibility :hidden} </style> </head> <body>
<table border=2 id="tablel"> <tr>
<td>
<р>Первая 3aM6TKa<input type="radio" name="groupl" onClick="chan_cont (1) " value="l" checkedx/p>
<р>Вторая 3aM6TKa<input type="radio" name="groupl" onClick="chan_cont (2) " value="2"x/p>
</td>
<td>
<p id="pl" class="visible">TeKCT первой заметки</р>
</td>
<td>
<p id="p2" class="hidden">TeKCT второй заметки</р>
</td> </tr> </table>
</body>
</html>
Рис. 7.3. Окно браузера с результатом отображения файла приведенного в листинге 7.3, в тот момент, когда пользователь активизировал второй переключатель
Теперь рассмотрим структуру HTML-кода созданной нами Web-страницы. Функционально код разбивается на три части: программа-скрипт, стилевая таблица и содержимое документа. Начнем со стилевой таблицы.
Легко заметить, что мы объявляем два класса с селекторами visible и hidden. Правила отображения для этих классов чрезвычайно просты.
