Почему исчезает контент при нажатии на пустую область?Есть секция .services, в которо
Вложений: 2
Есть секция .services, в которой находится .sidebar со списком-меню. При нажатии на один из пунктов меню в .sidebar справа в блоке .services-info появляется контент, который соответствует нажатому пункту, но есть проблема: когда я нажимаю на пустую область, то содержимое блока в .services-info пропадает. В чем проблема?
PS Я использую Swiper JS для полностраничного перелистывания блоков и это первый слайд-блок Весь код https://jsfiddle.net/1ohrf34p/ Сам сайт cn76553.tmweb.ru Нажал на пункт меню <div class="swiper-slide services-first-slider"> <div class="services-bg"> <div class="wrapper"> <div class="content"> <div class="sidebar"> <h3>Наши услуги</h3> <ul class="sidebar-menu"> <li id="business-card"><a href="#">Сайт-визитка</a></li> <li id="landing"><a href="#">Landing page</a></li> <li id="market"><a href="#">Интернет-магазин</a></li> <li id="corp"><a href="#">Корпоративный сайт</a></li> <li id="bitrix"><a href="#">1C Битрикс</a></li> <li id="advertising"><a href="#">Контекстная реклама</a></li> <li id="seo"><a href="#">SEO оптимизация</a></li> <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li> <li id="marketing"><a href="#">Контент-маркетинг</a></li> </ul> <ul class="sidebar-nav"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="services-info"> <div class="content"> <div class="business-card">Сайт-визитка</div> <div class="landing invisible">Landing page</div> <div class="market invisible"> <div class="services-info-title"> Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли. </div> <p>Что входит в нашу работу:</p> <div class="services-info-block"> <ul> <li>+ Подготовка технического задания</li> <li>+ Разработка прототипа</li> <li>+ Верстка макета</li> <li>+ Интеграция дизайна</li> </ul> <ul> <li>+ Написание уникальных текстов</li> <li>+ Сбор семантики</li> <li>+ Тестирование и запуск</li> <li>+ Подключение веб-аналитики</li> </ul> </div> <div class="services-info-footer"> <a class="order" href="#">Сделать заказ</a> <a href="#" class="details next"> <span>Узнать подробнее</span> <div class="button-next"></div> </a> </div> </div> <div class="corp invisible">Корпоративный сайт</div> <div class="bitrix invisible">1C Битрикс</div> <div class="advertising invisible">Контекстная реклама</div> <div class="seo invisible">SEO оптимизация</div> <div class="promotion invisible">Продвижение в соц. сетях</div> <div class="marketing invisible">Контент-маркетинг</div> </div> </div> </div> </div> </div> </div> document.querySelector('ul.sidebar-menu').addEventListener("click", function(e) { e.preventDefault(); let clickedId = e.target.parentNode.id; let divs = document.querySelectorAll('div.services-info>div.content>div'); divs.forEach((el) => { el.classList.remove('visible'); el.classList.add('invisible'); }); let targertEl = 'div.services-info>div.content>div.' + clickedId; document.querySelector(targertEl).classList.add('visible'); }); |
Часовой пояс GMT +3, время: 15:04. |