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

Автор: Topol Вторник, Апрель 17th, 2012 Нет комментариев

Рубрика: Программирование

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

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

Источник: woweb.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты