ページ全体の更新をトリガーしている場合は、現在読み込まれているページの状態が失われます。要約すると、いくつかのオプションがあります: 1.) ユーザーがクリックしたときにページを更新しない、2.) 状態を保存する。
オプション1
ユーザーがリンクをクリックしたときにページの更新をトリガーしないでください。代わりに、AJAX 呼び出しを介してサーバーからコンテンツを取得します。
たとえば、AJAX ライブラリとして jQuery を使用している場合、click
すべてのリンクにハンドラーを設定できます。いずれかがクリックされると、ハンドラーがトリガーされ、AJAX を介してコンテンツを取得し、クリックされたリンクにクラスを追加できます。CSS には、色を変えるルールを含めることができます。
$("a").click(function () {
var clicked = $(this);
// get the content from the server
$.get('ajax/test.html', function(data) {
// drop the content into the page
$('.result').html(data);
// flag the link as clicked
clicked.addClass('clicked');
});
});
オプション #2
どのユーザーがどのリンクをクリックしたかのマッピングをサーバー上のデータベース テーブルに保存します。ページが要求され、HTML をレンダリングしているときはいつでも、クリックされたことがわかっているリンクに CSS クラスを追加して、ブラウザーがページをロードしたときに別の色で表示できるようにすることができます。