Гостевая
Форум
Разделы
Главная страница
Js скрипты
Php скрипты
Html шаблоны
Книги по Web дизайну
Статьи


Главная страница статей --> Хитрости при программировании php, заметки по базам данных

Скрытие части контента вашей страницы

Источник: realcoding.net

Используй силу 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 только показан. Они же будут показаны только, когда нажаты соответствующие ссылки.

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



Похожие статьи:
- Perl & XML. Библиотека программиста
- Генерация контента сайта с использованием Template Toolkit
- Использование модуля для работы с шаблонами. Часть 2.
- Модуль Apache mod_rewrite
- Модуль Apache mod_rewrite
- Включите графику!!!
- Фильтры DHTML
- Поиск по сайту - статичный контент (Perl)
- Как подружить интерпретатор Perl с Homesite
- Работа с MS Access в PHP
- История языка HTML
- CSS + RSS = почти идеальный блог?
- Денвер + Ruby On Rails, мануал по установке


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
[0.001]