javascript - 单击按钮动态加载 DIV 的最简单方法？

Question

我这里有一个相对简单的问题。

我需要的是这个；我需要一个页面，顶部有 5 个按钮，下面有一个 DIV(最初是隐藏的)。单击按钮时，会将内容加载到 DIV 中(以另一个 DIV 的形式)
例如。

[Button 1] [Button 2] [Button 3] [Button 4] [Button 5] //5 buttons or links

<div id="content">
 // area for content to be loaded
</div>

<div id="content1">
//could be a table or image
</div>

<div id="content2">
//could be a table or image
</div>

<div id="content3">
//could be a table or image
</div>

<div id="content4">
//could be a table or image
</div>

<div id="content5">
//could be a table or image
</div>

在上面的示例中，当用户加载页面时，他们会看到 5 个按钮。如果他们按下按钮 5，则会将“content5”DIV 加载到“content”DIV 中，例如。

<div id="content">
 <div id="content5">
</div>
</div>

如果选择另一个按钮，它将加载其内容。

可以使用 jQuery 或简单的 JavaScript 来实现。

非常感谢

Answer 1

您需要在所有按钮上绑定(bind)一个单击处理程序。在这个特定示例中，明智的方法是使用元素的索引来确定哪个 div属于button .

$('button').bind('click', function() {
    $('div#content').html($('div#content' + ($(this).index()+1)).html());
});

演示:http://www.jsfiddle.net/8f8jt/

这将为所有 <button> 添加一个点击事件处理程序节点。单击时，它会查找当前单击按钮的索引 ( .index() ^help ) 并使用该值来查询相应的 <div> 。元素 ID。找到后，使用 .html() ^help获取和设置值。