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

Иногда, нам необходимо скрыть от глаз простого смертного (пользователя) или показать ему определенные элементы на странице. Для этого можно воспользоваться такими свойствами элементов как 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 - полностью прячет элемент, со сдвигом всех остальных элементов на его место.

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

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

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


Комментарии посетителей:
  • Супер!!! Спасибо огромадное, супер получилось!
    30 ноября 2009, 07:19 коммент полезен : +2 # Гость
  • Спасибо большое!
    09 августа 2012, 12:20 коммент полезен : +2 # Даниил (гость)
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

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

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

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

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

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

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

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