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.上記の div に読み込まれる HTML コンテンツ。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

後にhtmlを追加するだけです

$('#').append('html content')
于 2013-04-09T09:26:13.010 に答える
0

jQuery load()を使用する必要がある場合があります

$('#mydiv').load('test.html');
于 2013-04-09T09:25:27.507 に答える
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 に答える