0

我有一个 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脚本很陌生，所以让我知道如何为此编写脚本。任何帮助，将不胜感激。提前致谢

4

4 回答 4

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'));
});
于 2013-04-09T09:26:51.283 回答
0

尝试这个

 $(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>
于 2013-04-09T09:29:10.540 回答
0

您可能需要使用 jQuery load()

$('#mydiv').load('test.html');
于 2013-04-09T09:25:27.507 回答
0

你只需要在之后附加html

$('#').append('html content')
于 2013-04-09T09:26:13.010 回答