Jquery非同期通信でローカルのファイルを読み込む
jquery非同期通信で割と利用頻度が高いかな、と思われる処理です。
ローカルにあるファイルを読み込み、指定箇所に表示します。
単純に読み込むだけ
1 2 3 | $( function (){ $( "#str" ).load( "01/01.html" ); //デフォルトで読み込む }); |
クリックで変更する場合
1 2 3 4 5 6 7 8 9 | $( function (){ $( "#str" ).load( "01/01.html" ); //デフォルトで読み込む $( "#sel a" ).click( function (e){ //<ul id="sel">内のAタグをクリックしたら var Id = $( this ).attr( "id" ); // idを得る $( "#str" ).load( "01/" +Id); //01.html e.preventDefault(); //イベントの停止 }); }); |
リンクをクリックしたときに、どのファイルを表示するかは様々な方法があると思いますが、ここではAタグのidにファイル名を書いておき、それを表示するようにしています。