Показать и скрыть элемент с текстом
При разработке любых сайтов или интернет магазинов, требуется динамически скрывать и показывать элементы. Современные сайты должны выглядеть динамично, иначе цена разработки сайта будет очень низкой, т.к. ни кто много за статичный сайт платить не будет!
Обычно показываются, и скрываются html тег div, но не обязательно, можно манипулировать любыми элементами.
Изменение видимости элемента достигается за счет изменения css-свойства display. Если display = ‘block’, то элемент будет видим, если ‘none’, то скрыт.
Сейчас напишем небольшой примерчик, в нем при нажатии на ссылку мы будем показывать блок, а при повторном нажатии скрывать.
Вот исходный код примера, с подробным описанием:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<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 контента на JavaScript
Рассмотрим подгрузку html-кода на JavaScript. В нашем примере, при нажатии на ссылку, в тег div, будет вставляться html-код. Текст, который был в теге div будет заменяться на новый.
Вставляться html код будет при помощи свойства innerHTML.
Исходный код нашего примера:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<html> <head> <title>Динамическая подгрузка html контента на JavaScript | Дизайн студия OX2</title> </head> <body> <script type="text/javascript"> /** * Функция вставляет html код в элемент с id равным element_id * @author ox2.ru дизайн студия **/ function loadContent(element_id) { //Если элемент с id-шником element_id существует if (document.getElementById(element_id)) { document.getElementById(element_id).innerHTML = "<h2>Создание сайтов в компании OX2</h2><p style="color:red";>Тут можно любой контент</p><p>Компания OX2.ru создает лучшие сайты. <br/> Цена сайта и наши работы, вы можете узнать на сайте <a href="http://ox2.ru/">http://ox2.ru/</a></p>"; } }
</script> <a href="javascript:void(0)" onclick="loadContent('block_id')">Вставить html-код в div</a><br/><br/> <div id="block_id"> Сюда будет вставлен контент </div>
</body> </html> |