Javascript 带有本机JS的可切换框

我对原生JS有一些问题。我尝试为可切换框（wll称为“选项卡”）编写脚本

实际上我有一个导航：

<ul id="nav">
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#about">About</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
</ul>

以下是一些段落：

<p class="box" id="home">Home text</p>
<p class="box" id="about">About text</p>
<p class="box" id="contact">Contact text</p>

主页文本

关于文本

联系人文本

我必须在链接之间切换以显示正确的段落。事实上，我不能编辑HTML和CSS，一切都必须与JS一起工作

我得到了这个（它只显示了第一段）：

var-box=document.getElementsByClassName（'box'）；
对于（i=0；i

但是我不知道如何在段落之间切换。我的JS知识很差^^

---

有人有想法吗？

请查看JSFIDLE以获得解决方案：

---

这不是一个特别可重用的解决方案，但它可以满足您的需要，而无需使用库。

这就是您为javascript编写的全部代码吗？回答不错，但对于

getElementsByClassName

您也可以为较旧的浏览器提供一个替代方案，它只需要一个额外的行sagreed，我应该在那里提到一个警告。是的，它是有效的。thanx Adam！但实际上就像我说的，我不能编辑HTML，必须通过ul ID获取链接，所以我尝试了这个，它也有效

var box = document.getElementsByClassName('box');

for(i = 0; i < box.length; i++) {
if (i !== 0) {
    box[i].style.display = 'none';
}