Javascript 在点击按钮时动态加载DIV的最简单方法?

Javascript 在点击按钮时动态加载DIV的最简单方法?,javascript,jquery,html,dynamic,Javascript,Jquery,Html,Dynamic,我这里有一个相对简单的问题 我需要的是这个;我需要有一个页面,上面有5个按钮,下面有一个DIV(最初是隐藏的)。单击按钮时,它会将内容加载到DIV中(以另一个DIV的形式) 例如 [按钮1][按钮2][按钮3][按钮4][按钮5]//5个按钮或链接 //要加载内容的区域 //可能是桌子或图像 //可能是桌子或图像 //可能是桌子或图像 //可能是桌子或图像 //可能是桌子或图像 在上面的示例中,当用户加载页面时,他们会看到5个按钮。如果他们按下按钮5,它将加载“content”DIV中的“co

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

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

[按钮1][按钮2][按钮3][按钮4][按钮5]//5个按钮或链接
//要加载内容的区域
//可能是桌子或图像
//可能是桌子或图像
//可能是桌子或图像
//可能是桌子或图像
//可能是桌子或图像
在上面的示例中,当用户加载页面时,他们会看到5个按钮。如果他们按下按钮5,它将加载“content”DIV中的“content5”DIV,例如


如果选择了另一个按钮,则会加载其内容

可以通过jQuery或简单的JavaScript实现

非常感谢

试试这个

$('#button1').click(function() {
    $("#content").html(("#content1").html());
});

$('#button2').click(function() {
    $("#content").html(("#content2").html());
});

// etc
这样可以清除任何现有内容,并将正确的div复制到主#content div中。

试试这个

$('#button1').click(function() {
    $("#content").html(("#content1").html());
});

$('#button2').click(function() {
    $("#content").html(("#content2").html());
});

// etc

这样可以清除任何现有内容并将正确的div复制到主#content div。

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

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


这将向所有
节点添加一个单击事件处理程序。单击时,它会查找当前单击按钮()的索引,并使用此值查询相应的
元素id。找到后,使用获取并设置值。

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

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


这将向所有
节点添加一个单击事件处理程序。单击时,它会查找当前单击按钮()的索引,并使用此值查询相应的
元素id。找到后,使用获取并设置值。

您也可以使用,但它需要额外的脚本

您也可以使用,但它需要额外的脚本

您希望以前按钮单击的内容保留在
#content
内吗?您希望以前按钮单击的内容保留在
#content
内吗?我猜当您单击另一个按钮时,Sam不希望以前按钮单击的内容保留。(这是一个纯粹的假设。)我正在编辑和反复改进它:)经过几次编辑后,它几乎和另一个答案完全一样,所以我已经停止了。我猜山姆不希望在单击另一个按钮之前从以前的按钮点击留下来的内容。(这是一个纯粹的假设。)我正在编辑和反复改进它:)经过几次编辑后,它几乎和另一个答案完全一样,所以我停了下来。我在思考同样的事情,但是你早就发布了……任何方式都是为了回答,这很好,功能是完美的。但是,我需要修改它以使用jquery-1.4.2.min.js。感谢大家的帮助,非常感谢jAndy:)一个简单的问题,我假设用一个div类替换$('button')来执行单击操作可以吗?比如说$('btn-red')?@Sam:1.4.2应该可以正常工作,是的,你可以用任何你需要的选择器来替换它。嗯,看不出能在1.4.2分钟内工作。复制并粘贴准确的html,在标题中引用1.4.2min,并将以下内容复制到标题中:$('button').bind('click',function(){$('div#content').html($('div#content'+($(this.index()+1)).html()););我也在想同样的事情,但你之前发布了…无论答案是什么,都很好,功能是完美的。但是,我需要修改它以使用jquery-1.4.2.min.js。感谢大家的帮助,非常感谢jAndy:)一个简单的问题,我假设用一个div类替换$('button')来执行单击操作可以吗?比如说$('btn-red')?@Sam:1.4.2应该可以正常工作,是的,你可以用任何你需要的选择器来替换它。嗯,看不出能在1.4.2分钟内工作。复制并粘贴准确的html,在标题中引用1.4.2min,并将以下内容复制到标题中:$('button').bind('click',function(){$('div#content').html($('div#content'+($(this.index()+1)).html()););