无法使用自定义导航控制多个div

自定义导航是一种常见的前端开发技术，用于控制多个div元素的显示和隐藏。通过自定义导航，可以实现页面的交互效果和用户体验的提升。

自定义导航的实现方式有多种，以下是其中一种常见的方法：

HTML结构：在HTML中创建导航元素和对应的div容器。

<ul class="nav">
  <li data-target="div1">导航1</li>
  <li data-target="div2">导航2</li>
  <li data-target="div3">导航3</li>
</ul>

<div id="div1">内容1</div>
<div id="div2">内容2</div>
<div id="div3">内容3</div>

CSS样式：为导航元素和div容器设置样式，以实现显示和隐藏效果。

.nav li {
  cursor: pointer;
}

div[id^="div"] {
  display: none;
}

div.active {
  display: block;
}

JavaScript交互：使用JavaScript监听导航元素的点击事件，并根据点击的导航元素显示对应的div容器。

const navItems = document.querySelectorAll('.nav li');
const divs = document.querySelectorAll('div[id^="div"]');

navItems.forEach((item) => {
  item.addEventListener('click', () => {
    const target = item.getAttribute('data-target');
    divs.forEach((div) => {
      div.classList.remove('active');
    });
    document.getElementById(target).classList.add('active');
  });
});

通过以上步骤，就可以实现点击导航元素时，显示对应的div容器，并隐藏其他div容器的效果。

自定义导航在很多场景中都有应用，例如网页的选项卡、轮播图、折叠面板等。它可以提升用户体验，使页面更加动态和交互。

腾讯云提供了丰富的云计算产品和服务，其中与前端开发相关的产品包括云服务器、云存储、云函数等。您可以通过以下链接了解更多关于腾讯云的产品和服务：

请注意，以上答案仅供参考，具体的实现方式和推荐的产品可能因实际需求和情况而有所不同。