<button data-form-id="f1">form1</button>
<button data-form-id="f2">form2</button>
<div id="f1"></div>
<div id="f2"></div>
document.querySelectorAll('button').forEach(btn => {
const form = document.getElementById(btn.dataset.formId);
form.style.display = 'block';
})
не понимаю каким образом инспектор мне тут поможета вы попробуйте.
Так же впервые вижу подчеркивания в Visual Studio Code, в виде зеленого или красного цвета. С чем все это может быть связано?
libraryTarget: 'umd',
target: 'web',
global.SimpleModal = function() {
document.querySelectorAll(".sf-open-modal").forEach(trigger => {
trigger.addEventListener('click', e => {
e.preventDefault();
const targetModal = document.querySelector(trigger.dataset.src);
if (targetModal) targetModal.classList.add("active");
});
});
document.querySelectorAll(".sf-modal-closer").forEach(closer => {
closer.addEventListener('click', e => {
e.preventDefault();
closer.closest(".sf-modal").classList.remove("active");
})
});
document.addEventListener('click', e => {
if (e.target.classList.contains("sf-modal-wrapper")) {
e.target.parentNode.classList.remove("active");
}
});
};
SimpleModal();
const targetElement = document.querySelector('.blocks__phone-bg');
const allBlocks = document.querySelectorAll(`.blocks__item[data-item]`);
allBlocks.forEach(block => {
block.addEventListener('mouseenter', () => {
allBlocks.forEach(el => el.classList.remove('blocks__item--active'));
block.classList.add('blocks__item--active');
targetElement.className = `blocks__phone-bg blocks__phone-bg--${block.dataset.item}`;
});
});
- <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12">
+ <div class="col-sm-4">
ну вот сами и озвучили один из вариантов. Используйте как фон (background-image)