带有原生JS的可切换盒子

Question

我对原生JS有一些麻烦。我尝试为可切换的盒子编写一个脚本（称为“标签”）。

实际上我有导航：

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

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

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

有人有想法吗？

Answer 1

请检查jsfiddle以获得解决方案：

See fiddle here

这不是一个特别可重复使用的解决方案，但它可以在不使用库的情况下满足您的需求。