Как при нажатии кнопки получить блок div?
Всем привет,решил попрактиковаться и сделать верстку сайта,но столкнулся с проблемой
Как мне сделать,чтобы при нажатии на блок с названием фон размывался и появлялся другой блок с информацией
Если кто то такое делал,объясните пожалуйста как такое реализовать,уж очень интересно стало
Дополнительно:
С помощью js. Имея лишь картинки, без кода, больше подсказать нечего
<div class="menu_product"> <div class="menu_items"> <div class="menu_item marrig"> <img src="/img/1.jpg" alt="" width="401px" height="344px"> <h2 class="h2_menu_item">ЭСКИМО</h2> </div> <div class="menu_item flex-end"> <img src="/img/ФРУКТОВЫЕ ЛЬДЫ.jpg" alt="" width="381px" height="344px"> <h2 class="h2_menu_item">ФРУКТОВЫЙ ЛЁД</h2> </div> <div class="menu_item marrig"> <img src="/img/Vector.jpg" alt="" width="404px" height="399px"> <h2 class="h2_menu_item">БРИКЕТЫ НА ВАФЛЯХ</h2> </div> <div class="menu_item flex-end"> <img src="/img/Vector-1.jpg" alt="" width="429px" height="356px"> <h2 class="h2_menu_item">САХАРНЫЕ РОЖКИ</h2> </div> <div class="menu_item marrig"> <img src="/img/Vector-2.jpg" alt="" width="379px" height="404px"> <h2 class="h2_menu_item">ВАФЕЛЬНЫЕ СТАКАНЧИКИ</h2> </div> <div class="menu_item flex-end"> <img src="/img/Vector-3.jpg" alt="" width="379px" height="392px"> <h2 class="h2_menu_item">ПЛАСТИКОВЫЕ СТАКАНЧИКИ</h2> </div> <div class="menu_item marrig"> <img src="/img/Vector-4.jpg" alt="" width="393px" height="368px"> <h2 class="h2_menu_item">БОЛЬШИЕ БРИКЕТЫ</h2> </div> <div class="menu_item flex-end"> <img src="/img/Vector-5.jpg" alt="" width="429px" height="405px"> <h2 class="h2_menu_item">КРУПНАЯ ФАСОВКА</h2> </div> </div> </div> |
<div class="menu_product"> <div class="menu_items"> <div class="menu_item marrig"> <img src="/img/1.jpg" alt="" width="401px" height="344px"> <h2 class="h2_menu_item">ЭСКИМО</h2> </div> <div class="menu_item flex-end"> <img src="/img/ФРУКТОВЫЕ ЛЬДЫ.jpg" alt="" width="381px" height="344px"> <h2 class="h2_menu_item">ФРУКТОВЫЙ ЛЁД</h2> </div> <div class="menu_item marrig"> <img src="/img/Vector.jpg" alt="" width="404px" height="399px"> <h2 class="h2_menu_item">БРИКЕТЫ НА ВАФЛЯХ</h2> </div> <div class="menu_item flex-end"> <img src="/img/Vector-1.jpg" alt="" width="429px" height="356px"> <h2 class="h2_menu_item">САХАРНЫЕ РОЖКИ</h2> </div> <div class="menu_item marrig"> <img src="/img/Vector-2.jpg" alt="" width="379px" height="404px"> <h2 class="h2_menu_item">ВАФЕЛЬНЫЕ СТАКАНЧИКИ</h2> </div> <div class="menu_item flex-end"> <img src="/img/Vector-3.jpg" alt="" width="379px" height="392px"> <h2 class="h2_menu_item">ПЛАСТИКОВЫЕ СТАКАНЧИКИ</h2> </div> <div class="menu_item marrig"> <img src="/img/Vector-4.jpg" alt="" width="393px" height="368px"> <h2 class="h2_menu_item">БОЛЬШИЕ БРИКЕТЫ</h2> </div> <div class="menu_item flex-end"> <img src="/img/Vector-5.jpg" alt="" width="429px" height="405px"> <h2 class="h2_menu_item">КРУПНАЯ ФАСОВКА</h2> </div> </div> </div>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы получить блок div при нажатии кнопки, вам необходимо использовать JavaScript. Вот пример кода, который реализует данную функциональность:
```html
function getDiv() {
var divElement = document.getElementById('myDiv');
alert(divElement.innerHTML);
}
```
В данном коде у нас есть блок div с id "myDiv" и кнопка, которая при нажатии вызывает функцию getDiv(). Внутри этой функции мы используем метод document.getElementById() для получения элемента div по его id и затем выводим его содержимое с помощью свойства innerHTML.
Таким образом, при нажатии на кнопку вы увидите содержимое блока div. Не забудьте подключить этот скрипт к вашему HTML документу, чтобы он работал правильно.