javascript - 如何将按钮加载到同一页面上？

Question

对于那些正在阅读这篇文章的人，非常感谢你试图帮助我。

无论如何，我是编码的初学者。我的问题是我有几组按钮，它实际上是我作为一个年轻的新手试图实现的主题布局，但我似乎无法弄清楚如何让这些按钮被点击并仅加载 1 个特定的按钮页面中的框。其他人说它可以通过 Ajax、JQuery 或 Javascript 来完成，但我不知道，我只知道 HTML/CSS，仅此而已……我什至不知道我想要发生的这个术语叫什么。

谁能给我最简单的解决方案或示例供我遵循？

我确实尽力通过自己的研究来做到这一点，但我想我的技能还不足以解决这个问题。甚至尝试向我的天才兄弟寻求帮助，但到目前为止，即使我只是想学习，他也从来没有让我轻松过或伸出援助之手。正如他常说的那样，他只是很忙。

这是我到目前为止尝试做的:http://animiao.com/IMVU%20Coding/sample3.php Perse，假设默认显示一个框(例如主页)，其余 3 个按钮应该显示它们自己的信息。

问题: 它们仅在我单击“聊天”>“消息”>“添加”按钮时按顺序显示，而不按任何其他顺序显示。 当我再次单击它们时，它们没有显示。

猜猜我的方法是错误的，请帮忙。

Answer 1

所有 <div> s 彼此堆叠，没有一个 z-index用 CSS 指定。结果，出现在顶部的将是
a) 最后在 HTML 代码中
b) 可见

修复它的最简单方法是将内容 div 包装在另一个 div 中:

<div id="content_wrapper">
    <div id="random">something...</div>
    <div id="chat">something...</div>
    ...
</div>

然后用这个 JS 隐藏你不想要的:

var contents = document.getElementById('content_wrapper').childNodes,
    i = 0,
    i_max = contents.length;
for (i; i < i_max; i++) {
    contents[i].style.display = 'none';
 }

然后用您的“显示”代码跟随那个:

var el = document.getElementById(id);
if (el.style.display == 'none')
    el.style.display = 'block';

这可以很容易地压缩成更少的代码，但也会让您理解起来不那么明显，所以我暂时保留它。