带有原生 JS 的可切换盒子
我在使用原生 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 知识很差^^
有人有想法吗？
I have some troubles with native JS. I try to write a script for switchable boxes (wll known as "tabs").
actually i have a navigation:
<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>
and below some paragraphs:
<p class="box" id="home">Home text</p>
<p class="box" id="about">About text</p>
<p class="box" id="contact">Contact text</p>
i have to switch between the links to show the right paragraphs. actually i cannot edit HTML and CSS, everything have to work only with JS.
I got this one (it only shows the first paragraph):
var box = document.getElementsByClassName('box');
for(i = 0; i < box.length; i++) {
if (i !== 0) {
box[i].style.display = 'none';
}
but i have no idea how can i switch between the paragraphs. my JS knowledge is very poor^^
have anybody an idea?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
请检查 jsfiddle 的解决方案：
请参阅此处的 fiddle
这不是一个特别可重用的解决方案，但它可以满足您的需求require 而不使用库。
Please check jsfiddle for a solution:
See fiddle here
This is not a particularly reusable solution but it does what you require without the use of a library.