我这里有一个相对简单的问题。
我需要的是这个;我需要一个页面,顶部有 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 来实现。
非常感谢
最佳答案
您需要在所有按钮上绑定(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获取和设置值。
关于javascript - 单击按钮动态加载 DIV 的最简单方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4883282/