| | |
|
Обновленные темы |
Популярные темы |
Последние файлы |
Последние новости |
|
|
|
|
JavaScript показать и скрыть элемент с текстом
|
|
|
Дата: Вс, 05.08.2018, 13:02:51 | Сообщение # 1
|
|
При разработке любых сайтов или интернет магазинов, требуется динамически скрывать и показывать элементы. Современные сайты должны выглядеть динамично, иначе цена разработки сайта будет очень низкой, т.к. ни кто много за статичный сайт платить не будет!
Обычно показываются, и скрываются html тег div, но не обязательно, можно манипулировать любыми элементами. Изменение видимости элемента достигается за счет изменения css-свойства display. Если display = ‘block’, то элемент будет видим, если ‘none’, то скрыт.
Сейчас напишем небольшой примерчик, в нем при нажатии на ссылку мы будем показывать блок, а при повторном нажатии скрывать.
Вот исходный код примера, с подробным описанием:
Код <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>
Сталкер XemorDio.. В Зоне: 25.09.2013 Ранг: О-Сознание Страна: Япония город: Лион
|
|
| | | | |
|