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>

点击button1 1.HTML内容将被加载到上面的div中。点击button2,2.HTML ..等等。

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

Answer 1

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

<强> 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')选择文档中的所有按钮..所以最好给它们一个类，并使用类选择器{{1}选择它是特定的}

更具体

或

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

Answer 2

您可能需要使用jQuery load()

$('#mydiv').load('test.html');

Answer 3

你只需要在

之后追加html

$('#').append('html content')

Answer 4

试试这个

 $(document).ready(function(){
    $("button").click(function(){
  var file = $(this).attr('number')+'.html';
  $('.mydiv').load(file);
  })
})
<div class="buttons">
<button  number= '1'  type="button">button1</button>
<button  number= '2'  type="button">button2</button>
<button  number= '3'  type="button" >button3</button>
</div>

<div class="mydiv">

</div>

如何将外部html添加到div中

4 个答案: