できれば少しでもご指導いただければと思います。私のウェブサイトには、「最も人気のある」を示す小さな領域があり、その下には、ブログ、ヒント、ニュース、ビデオの 4 つのハイパーリンクがあります。ユーザーがハイパーリンクをクリックすると、理想的にはページ全体をロードせずに適切なコンテンツを以下に印刷するようにしたいが、必須ではない.
私はjQueryが初めてなので、誰かが私を助けることができれば、それは素晴らしいことです.
ありがとうございました。
できれば少しでもご指導いただければと思います。私のウェブサイトには、「最も人気のある」を示す小さな領域があり、その下には、ブログ、ヒント、ニュース、ビデオの 4 つのハイパーリンクがあります。ユーザーがハイパーリンクをクリックすると、理想的にはページ全体をロードせずに適切なコンテンツを以下に印刷するようにしたいが、必須ではない.
私はjQueryが初めてなので、誰かが私を助けることができれば、それは素晴らしいことです.
ありがとうございました。
jQuery の AJAX、特に load メソッドをご覧ください: http://api.jquery.com/load/
簡単に言うと、このメソッドは URL に対してリクエストを行い、指定した任意の要素にレスポンスを書き込みます。あなたの場合、私はおそらく:
1) 表示したい HTML スニペットを返す URL を作成します。例:
<div><p>Popular Blog 1</p><p>Popular Blog 2</p></div>
2) ページの JavaScript に、次のような内容を追加します。
$("a#myPopularBlogsLink").click(function() {
$("#loadAndReplaceContentInThisElement").load("http://mywebsite.com/some-url-returning-data/);
});
3) jQuery のドキュメントを読むと、状況に合わせてこれをより適切に適応させることができる場合があります。たとえば、.load() メソッドでパラメーターを渡して、データをロードするページを選択するなどです。
状況の詳細なしに、ベスト プラクティスが何であるかを言うのは困難です。URL を使用してサーバー側でどの程度の柔軟性があるか、コンテンツをどの程度制御できるか、コンテンツをインデックス化する検索エンジンが必要かどうか (彼らはAJAX を介してロードされたコンテンツのインデックスを作成しないでください)。
jQuery を使用すると、次のようなことを試すことができます。
<script type="text/javascript">
$(document).ready(function() {
$("#alink").click(function () {
$("#aframe").attr("src", $(this).attr('href'));
return false;
});
});
</script>
<a id="alink" href="http://www.google.com">Google</a>
<div id="adiv">
<iframe id="aframe" src="" width="100%" height="300"></iframe>
</div>