Портал для веб-мастера

Инструменты для Бизнеса

Вход пользователей
Поиск статей
WoWeb.ru » Статьи » Программирование для Web » DHTML

Скрытие части контента вашей страницы
Используй силу DOM (объектная модель документа) для того, чтобы скрыть секции твоей страницы и показать их, когда нажата ссылка.

Ты когда-нибудь задавался вопросом, как показать различный контент, когда нажаты различные кнопки? В этой статье ты узнаешь, как это сделать.

В голове своей страницы помести следующее:

<script type="text/javascript">
function show_div(div_id) {
// скрывает все div`ы
document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_2').style.display = 'none';
document.getElementById('the_div_3').style.display = 'none';

// показывает требуемый div
document.getElementById(div_id).style.display = 'block';
} </script>

Помести это на твоей странице между тэгами и :

<a href="" onclick="show_div('the_div_1'); return false;">Div 1 </a>
<a href="" onclick="show_div('the_div_2'); return false;">Div 2 </a>
<a href="" onclick="show_div('the_div_3'); return false;">Div 3 </a>

Это покажет три ссылки, одна для каждого div`а. Нажатие на одну из этих ссылок приведет к тому, что будет показываться относящийся к ней div, но будут скрываться остальные.

Затем ты можешь поместить сами div`ы где-нибудь на твоей странице, используя:

<div id="the_div_1">Это div 1</div>
<div style="display: none;" id="the_div_2">Это div 2</div>
<div style="display: none;" id="the_div_3">Это div 3</div>

Ты наверное уже заметил, что к второму и третьему div`ам применен стиль display:none. Это позволяет скрыть их, когда страница в первый раз загружена, и первый div только показан. Они же будут показаны только, когда нажаты соответствующие ссылки.

Возможности для использования этого способа бесконечны. Дерзайте.

Автор: john paul the1st · Добавлена: 2005-05-26
Просмотров: 5193 · Рейтинг: 4.0

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела
Flash
Apache
WWW
PhotoShop
Веб-дизайн
Раскрутка и реклама
Базы данных
3D графика
Хостинг
Истории веб-мастеров
Web-технологии
Сетевая безопасность
Программирование для Web
Операционные системы

Новые статьи
Лучшие статьи
Популярные статьи
Комментируемые статьи
Разделы сайта
Скрипты
Статьи
Шрифты
Флэш исходники
HTML шаблоны
Партнерки
Клипарты
Смайлы
Фоны
Гифы
Иконки
Опрос сайта
Ведете ли вы блог?
Всего ответов: 60296
Наша кнопка
WoWeb.ru - портал для веб-мастера