2012-03-20 8 views
6

誰かがここで助けることができるでしょうか?jQuery/AJAX - ボタンをクリックしたときにコンテンツをdivにロードしますか?

私はdivを入力したいと思います。

<div id="contenthere"></div> 

外部ファイルのコンテンツ。

/includes/about-info.html 

特定のクラスのボタンがクリックされた場合など。

<p class="classloader">Click Here</p> 

誰でも簡単なコード例がありますが、これを達成するために表示できますか?

+0

http://api.jquery.com/load / – Blazemonger

答えて

13

使用jQuery.clickjQuery.load

$(document).ready(function(){ 
    $('.classloader.').click(function(){ 
     $('#contenthere').load('/includes/about-info.html'); 
    }); 
}) 
2

あなたは段落の.click()イベントをサブスクライブして、特定のURLにAJAX要求を送信し、指定されたセレクタに結果を注入する.load()機能を使用することができます。

$(function() { 
    $('.classloader').click(function() { 
     $('#contenthere').load('/includes/about-info.html'); 
     return false; 
    }); 
}); 
0

次のことを試してみてください。

var myurl = 'myfileonthesamedomain.html'; 

$('button').click(function(){ 
    $('div.loadme').load(myurl); 
}); 
2

のjQueryの負荷最新版:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

のjQueryコード:

<script language="javascript"> 
$(function(){ 
    $(".classloader").click(function(){ 
    $("#contenthere").load("/includes/about-info.html"); 
    }); 
}); 
</script> 
</script> 

HTMLコード:

<p class="classloader">Click Here</p> 
<div id="contenthere"></div> 
関連する問題