如何让不同的div在导航栏点击时显示在相同的位置？

<nav>
  <ul>
    <li id="nav-item1">导航项1</li>
    <li id="nav-item2">导航项2</li>
    <li id="nav-item3">导航项3</li>
  </ul>
</nav>

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

.content {
  display: none;
}

document.getElementById("nav-item1").addEventListener("click", function() {
  showDiv("div1");
});

document.getElementById("nav-item2").addEventListener("click", function() {
  showDiv("div2");
});

document.getElementById("nav-item3").addEventListener("click", function() {
  showDiv("div3");
});

function showDiv(divId) {
  var divs = document.getElementsByClassName("content");
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.display = "none";
  }
  document.getElementById(divId).style.display = "block";
}