通过单击侧边列表菜单在div内容之间切换

<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="#" onclick="showContent(1)">内容1</a></li>
      <li><a href="#" onclick="showContent(2)">内容2</a></li>
      <li><a href="#" onclick="showContent(3)">内容3</a></li>
    </ul>
  </div>
  <div class="content">
    <div id="content1">这是内容1</div>
    <div id="content2">这是内容2</div>
    <div id="content3">这是内容3</div>
  </div>
</div>

.container {
  display: flex;
}

.sidebar {
  width: 200px;
}

.content {
  flex-grow: 1;
}

.content div {
  display: none;
}

.content div:first-child {
  display: block;
}

function showContent(index) {
  var contentDivs = document.querySelectorAll('.content div');
  for (var i = 0; i < contentDivs.length; i++) {
    contentDivs[i].style.display = 'none';
  }
  contentDivs[index - 1].style.display = 'block';
}