Скрытие и показ элемента
Мы научились изменять любое CSS-свойство любого HTML-элемента. Это даёт широкие возможности изменения пользователем оформления страницы.
Иногда пользователю сайта бывает трудно разобраться в обилии информации, выложенной на сайте. Тогда веб-программисты поступают следующим образом. Первоначально отображают основные пункты, то есть тезисы. Если пользователь заинтересовался, то он щёлкает по этому пункту и на странице раскрывается ранее скрытая информация.
Для того, чтобы скрыть теги с информацией, используется CSS-свойство display. При значении none тег скрывается, а при значении block — отображается. Пример: <div style="display:none">Скрытый текст</div>
Задание 4
Согласно одному из заданий вы создали блок div с текстом “Цвет изменяется кнопкой”. Добавьте в него CSS-свойство display и проверьте действие значений none и block.
Вопрос. Проанализируйте приведённый ниже скрипт. Что изменится при щелчках на кнопках?
<input type="button" value="Close" onclick="document.getElementById('колесо').style.display='none'" /> <input type="button" value="Open" onclick="document.getElementById('колесо').style.display='block'"/><br /> <img src="images/logo.jpg" id="колесо" />
|
Рис. 2. Изменение одного элемента с помощью двух других |
На рис. 2. показано, что один и тот же HTML-элемент можно изменять с помощью нескольких других.
Задание 5
Разместите на странице две кнопки и ниже картинку по вашему выбору. Одна кнопка должна скрывать картинку, а другая — показывать.
Внешний вид
В предыдущем примере видимостью элемента управляют щелчком по кнопкам. Аналогично можно управлять видимостью элемента щелчком по текстовому элементу. Это обычно полезно, когда на странице очень много разнообразной информации и, чтобы пользователю было легче ориентироваться, подробности скрывают. Если же пользователь заинтересовался каким-то разделом, то он может щёлкнуть на заголовке и открыть подробности.
Например, в интернет-магазине продают спортивные товары: велосипеды, лыжи, коньки, мячи и тому подобное. Каждая категория товаров имеет свои подкатегории. Например, имеются велосипеды дорожные, спортивные, кроссовые и так далее.
Задание 6
Напишите параграф “Велосипеды”, а под ним поместите список различных видов велосипедов и скройте их. Напишите в параграфе обработчик события щелчка, который раскрывает скрытый список.
Внешний вид
Велосипеды |
Велосипеды
|
Несколько событий в одном элементе
До сих пор в одном HTML-элементе мы записывали только один атрибут «событие-обработчик». То есть мы заставляли HTML-элемент реагировать только на одно событие, например, только на щелчок мыши, или только на наведение мыши. Но нам никто не запрещает написать в одном HTML-элементе несколько атрибутов с разными «событиями-обработчиками». Пример:
<body id="content"> <p onMouseOver="document.getElementById('content').style.background='#CCFFCC'" onMouseOut="document.getElementById('content').style.background='#FFFFFF'">Этот текст меняет фон страницы</p> </body>
|
Рис. 3. Два события в одном элементе |
Здесь параграф реагирует на два события: наведение мыши и уход мыши (рис. 3).
код в действии можно посмотреть на сайте http://webuchitel.ru/JavaScript/js_02.html
Задание 7
В предыдущем задании добавьте в параграф реакцию на двойной щелчок, при котором список опять скрывается.
id |
атрибут: идентификатор тега |
getElementById() |
метод: элемент с заданным идентификатором |
display |
CSS-свойство: видимость элемента |