导航栏在一页中更改div内容

Question

所以为了快速而又重要，我正在尝试在屏幕左侧创建一个小的垂直菜单，当您单击列表中的某个项目时，它会将div的所有内容更改为它的权利，“内容”部分，但没有更改物理html文件。意思是，我想将它作为一个文档保存，并使用JavaScript，就像我之前看到的那样。

这是我想做的'模拟'：

修改/更新

好吧所以我找到了一个有效的解决方案，但我有两件事我想用它来改变，我不确定如何。

          function toggle_visibility(id) {
                 var e = document.getElementById(id);
                 if(e.style.display == 'block')
                        e.style.display = 'none';
                 else
                        e.style.display = 'block';
            }

我想添加以下内容：

1. 一次只能显示一个
2. 某种'幻灯片'动画 改变'屏幕'

以下是目前链接如何工作的示例：

<a onclick="toggle_visibility('2');">Testing</a>

<div style="display:none;" id="2">
testing for page 2
</div>

Answer 1

Vanilla JavaScript足够用于此

＆＃13;

＆＃13;

document.querySelectorAll('nav a')
  .forEach(e => e.addEventListener('click', _ => change(e.dataset.id)))


function change(n) {
  let panels = document.querySelectorAll('main div')
  panels.forEach(p => p.classList.remove('active'))
  panels[n - 1].classList.add('active')
}

＆＃13;

.container {
  display: flex;
}
nav {
  display: flex;
  flex-direction: column;
  margin-right: 50px;
  background-color: seagreen;
  cursor: pointer;
}
nav a {
  padding: 10px;
}
nav a:hover {
  background-color: gold;
  display: block;
}
main div {
  display: none;
  padding: 20px;
}
.active {
  display: block;
}

＆＃13;

<div class="container">

  <nav>
    <a data-id="1">Item 1</a>
    <a data-id="2">Item 2</a>
    <a data-id="3">Item 3</a>
  </nav>
  <main>
    <div class="active">Item 1 Content</div>
    <div>Item 2 Content</div>
    <div>Item 3 Content</div>
  </main>

</div>

＆＃13;

＆＃13;

＆＃13;