无法使用自定义导航控制多个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>

.nav li {
  cursor: pointer;
}

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

div.active {
  display: block;
}

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');
  });
});