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

发布于 2024-10-16 01:44:11 字数 902 浏览 1 评论 0原文

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

我要求的是这个；我需要一个页面，顶部有 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 来实现。

非常感谢

原文

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.

[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.

<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.

Many thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自由范儿 2024-10-23 01:44:11

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

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

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

这个将为所有

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 div belongs to a button.

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

Demo: 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()^help to get and set the value.

回复收藏 0 原文

甲如呢乙后呢 2024-10-23 01:44:11

您还可以使用 jQueryUI 选项卡，但它需要额外的脚本。

回复收藏 0 原文

不知所踪 2024-10-23 01:44:11

尝试

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

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

// etc

此方法会清除所有现有内容并将正确的 div 复制到主 #content div 中。

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.

回复收藏 0 原文

~没有更多了~