有一个.services部分,其中包含一个带有列表菜单的.sidebar。当您单击菜单中的一个菜单项时。..services info块右侧的侧栏显示与项内容匹配的内容,但有一个问题:当我单击空区域时..services info中的块内容消失。问题是什么?PS我正在使用Swiper进行块的全页面翻转,这是第一个幻灯片块。
代码jsfiddle.net/1 ohrf34p/ Site cn76553.tmweb.ru
选定项目
单击任何空白处
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');
});
.invisible {
display: none;
}
.visible {
display: block;
}
<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>
发布于 2021-08-05 00:07:24
这是因为您得到了一个错误: Uncaught :未能在‘文档’上执行'querySelector‘:'div.services-info>div.content>div.’.‘不是有效的选择器。您正在尝试获取元素的id,该元素没有它,除此之外,您还试图通过错误的选择器访问它,使用".idOfElement“而不是"#idOfElement”。
https://stackoverflow.com/questions/68658709
复制相似问题