Скрыть или показать элементы на странице

Иногда, нам необходимо скрыть от глаз простого смертного (пользователя) или показать ему определенные элементы на странице. Для этого можно воспользоваться такими свойствами элементов как visibility и display.

Вот пример страницы, где Ссылка 1 скрывает Ссылку 2, а Ссылка 3 наоборот показывает.

<html>
<head>
<title>Untitled</title>
<script type=text/javascript language=JavaScript>
<!--
function q3_onclick()
{
//document.getElementById('q2').style.visibility='visible';
document.getElementById('q2').style.display='';
}
function q1_onclick()
{
//document.getElementById('q2').style.visibility='hidden';
document.getElementById('q2').style.display='none';
}
//-->
</script>
</head>
<body>
<a id=q1 href=# onClick=q1_onclick()>Ссылка 1</a>
<a id=q2 href=#>Ссылка 2</a>
<a id=q3 href=# onClick=q3_onclick()>Ссылка 3</a>
</body>
</html>

Различие между visibility и display заключается в том, что visibility делает элемент невидимым, но оставляет на его месте пустоту размером с данный элемент. Display - полностью прячет элемент, со сдвигом всех остальных элементов на его место.

Оцени публикацию:
  • 27,114
 Оценили человек: 27
  •  

Похожие статьи:

Комментарии посетителей:
  • Супер!!! Спасибо огромадное, супер получилось!
    30 ноября 2009, 10:19 коммент полезен : 0 # Гость
Предложения и пожелания:
Ваше имя: Ваш E-mail:
Введите изображенные цифры:
Captcha
« Пишем кроссбраузерный Ajax размером 2 кб Определение возможностей браузера »

HTML (19)

CSS (36)

PHP (22)

MySQL (14)

JavaScript (57)

Flash (6)

XML (3)

Apache (34)

Дизайн (35)

Продвижение (31)

Программы (26)

Unix (11)

Интересное (37)


Справочники и учебники:


Последние комменты:

04.05.2012 08:53, 1 коммент
27.04.2012 23:33, 93 коммента
26.04.2012 16:08, 20 комментов

Новые заметки:

→ Защита сервера от ошибок в phpMyAdmin

→ HTML5 - новые виды атак

→ Социальные рекомендации Twitter в Google

→ Ашманов про стартапы

→ Skype Distributed Database Architecture

→ Erlang - лекарство при высоких нагрузках

→ Amazon Web Services: инструменты обеспечения масштабируемости и отказоустойчивости

Обсуждения на форуме:

→ некорректно отображается страница в браузерах

→ не могу войти в admin

→ Нужна критика идеи

→ Поиск по дополнительным полям и формам

→ Вопрос по категориям

→ Несколько вопросов по проекту.

→ Плагины, меню и интеграция
Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter| Здравствуйте, Гость | Войти | Регистрация| Карта сайта | RSS ленты
О проекте | Скачать CMS | Видеоуроки | Документация | Плагины | Форум | Идеи | Новости | Веб-мастеру | Контакты

YaPro CMS в Живом Журнале

YaPro CMS в Твитере

YaPro CMS в Одноклассниках

YaPro CMS в Яндекс.Блогах

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2012 YaPro.Ru


Главная » Веб-мастеру » JavaScript »