javascript 在按钮单击时动态加载 DIV 的最简单方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4883282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easiest way to dyanmically load a DIV on button click?
提问by Sam
I have a relatively simple question here.
我在这里有一个相对简单的问题。
What I require is this; I need to have a page with 5 buttons at the top and a DIV beneath them (initially hidden). When a button is clicked, it loads content into the DIV (in the form of another DIV)
eg.
我需要的是这个；我需要一个页面，顶部有 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>
In the above example, when the user loads the page they see 5 buttons. If they press button 5, it loads the "content5" DIV inside of the "content" DIV eg.
在上面的例子中，当用户加载页面时，他们会看到 5 个按钮。如果他们按下按钮 5，它会在“内容”DIV 中加载“content5”DIV，例如。
<div id="content">
<div id="content5">
</div>
</div>
If another button is selected it loads it's content.
如果选择了另一个按钮，它会加载它的内容。
Can be achieved with jQuery or simple JavaScript.
可以使用 jQuery 或简单的 JavaScript 来实现。
Many thanks
非常感谢
回答by jAndy
You need to bind a click handler on all of the buttons. Smart way in this particular example would be, to use the index of the elements to determine which divbelongs to a button.
您需要在所有按钮上绑定一个单击处理程序。在这个特定示例中，聪明的方法是使用元素的索引来确定哪个div属于 a button。
$('button').bind('click', function() {
$('div#content').html($('div#content' + ($(this).index()+1)).html());
});
Demo: http://www.jsfiddle.net/8f8jt/
演示：http: //www.jsfiddle.net/8f8jt/
This will add an click event handler to all <button>nodes. On click, it looks for the index of the current clicked button (.index()help) and uses this value to query for the accordant <div>elements id. Once found, use .html()helpto get and set the value.
这将为所有<button>节点添加一个单击事件处理程序。单击时，它会查找当前单击的按钮 ( .index()help)的索引，并使用此值来查询一致的<div>元素 id。找到后，使用.html()帮助获取和设置值。
回答by Radek Benkel
You also can use jQueryUI tabs, but it requires additional script.
您也可以使用jQueryUI tabs，但它需要额外的脚本。
回答by JK.
Try this
试试这个
$('#button1').click(function() {
$("#content").html(("#content1").html());
});
$('#button2').click(function() {
$("#content").html(("#content2").html());
});
// etc
This way clears any existing content and copies the correct div into the main #content div.
这种方式会清除任何现有内容并将正确的 div 复制到主 #content div 中。
