javascript - 如何将外部html添加到div中

Question

我有一个 HTML 文件 index.HTML。我想在单击按钮时将外部文件(1.HTML、2.HTML、3.HTML)加载到一个 div 中我的 HTML 是这样的

<div class="buttons">
<button  type="button">button1</button>
<button  type="button">button2</button>
<button  type="button">button3</button>
</div>

<div class="mydiv">

</div>

on click of button1 1.在上面的div中加载HTML内容。单击按钮 2、2.HTML.. 等

我是 java 脚本的新手，所以让我知道如何为此编写脚本。任何帮助，将不胜感激。提前致谢

Answer 1

使用load() ..和数据属性..试试这个

html

<div class="buttons">
<button  type="button" data-url="1.html">button1</button>
<button  type="button" data-url="2.html">button2</button>
<button  type="button" data-url="3.html">button3</button>
</div>

jquery

$("button").click(function(){
    $('.mydiv').load($(this).data('url'));
});

注意选择器$('button') 选择文档中存在的所有按钮..所以最好给他们一个类并选择它具体使用类选择器 .

更具体一点

$('.buttons > button').click(function(){
     $('.mydiv').load($(this).data('url'));
});

或

<div class="buttons">
<button  type="button" data-url="1.html" class="btnclass">button1</button>
<button  type="button" data-url="2.html" class="btnclass">button2</button>
<button  type="button" data-url="3.html" class="btnclass">button3</button>
</div>

$(".btnclass").click(function(){
    $('.mydiv').load($(this).data('url'));
});