JavaScript показати / приховати елемент з текстом
При розробці будь-яких сайтів або інтернет магазинів, потрібно динамічно приховувати і показувати елементи. Сучасні сайти повинні виглядати динамічно, інакше ціна розробки сайту буде дуже низькою, тому що ні хто багато за статичний сайт платити не буде!
Зазвичай показуються, і ховаються html тег div, але не обов'язково, можна маніпулювати будь-якими елементами.
Зміна видимості елемента досягається за рахунок зміни css-властивості display. Якщо display = 'block', то елемент буде бачимо, якщо 'none', то прихований.
Зараз напишемо невеликий прімерчік, в ньому при натисканні на посилання ми будемо показувати блок, а при повторному натисканні приховувати.
Ось вихідний код прикладу, з докладним описом:
<Html> <head> <title> JavaScript показати і приховати елемент з текстом | Дизайн студія OX2 </ title> </ head> <body> <script type = "text / javascript"> / ** * Функція Приховує / Показує блок * @author ox2.ru дизайн студія ** / function showHide (element_id) { // Якщо елемент з id-шником element_id існує if (document.getElementById (element_id)) {// Записуємо посилання на елемент в змінну obj var obj = document.getElementById (element_id); // Якщо css-властивість display НЕ block, то: if (obj.style.display! = "Block") {obj.style.display = "block"; // Показуємо елемент} else obj.style.display = "none"; // Приховуємо елемент} // Якщо елемент з id-шником element_id не знайдений, то виводимо повідомлення else alert ( "Елемент з id:" + element_id + "не найден!"); } </ Script> <! - При кліці запускаємо функцію showHide, і передаємо параметр id-шник елемента який потрібно показати / приховати -> <a href = "javascript: void (0)" onclick = "showHide ( 'block_id' ) "> Приховати / Показати елемент </a> <br/> <br/> <div id =" block_id "style =" display: none; "> Тут будь-який текст і html код <br/> <br/> Дизайн студія OX2 розробляє сайти і інтернет магазини будь-якої складності. <br/> За низькими цінами! </ Div> </ body> </ html>
завантажити исходник
При розробці будь-яких сайтів або інтернет магазинів, потрібно динамічно приховувати і показувати елементи. Сучасні сайти повинні виглядати динамічно, інакше ціна розробки сайту буде дуже низькою, тому що ні хто багато за статичний сайт платити не буде! Зазвичай показуються, і ховаються html тег div, але не обов'язково, можна маніпулювати будь-якими елементами.