aタグでhoverさせ、onClickでイベントは呼び出すようなケースで、よく使う href="#"について、クリックするといったん画面の上に移動してしまう動きを無効にする方法[その2]です。 →[その1]はこちらから

"#"の代わりに"javascirpt:void(0);"を使う

サンプルとして、「文字を追加1」ボタンと「文字を追加2」ボタンを用意しました。この2つは、それぞれのID名でjQueryのfunctionを呼び出しますが、スクリプトは同じ構造です。

$(function() {
	$("#exsf1").click(function() {
		$(".exs1").append("<b style='color:red'>【追加部分】</b>");
	});
	$("#exsf2").click(function() {
		$(".exs2").append("<b style='color:red'>【追加部分】</b>");
	});
});

aタグのほうで、「文字を追加1」ボタンは、href="#"、 「文字を追加2」ボタンは、href="javascript:void(0)"を使っています。

HTMLソース
<a href="#" id="exsf1" class="kahen-green" style="float:left;">
<span>文字を追加1</span>
</a>
<a href="javascript:void(0)" id="exsf2" class="kahen-green" style="float:left;">
<span>文字を追加2</span>
</a>

「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。

(例1)この後ろに文字を追加   文字を追加1

この例では、ボタンをクリックすると、スクリプトは正しく機能するものの、画面上に移動してしまいます。


(例2)この後ろに文字を追加   文字を追加2

こちらの例では、hrefの動きをキャンセルして移動せず、その場で動作します。



戻るボタン