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

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

サンプルとして、「文字を追加１」ボタンと「文字を追加２」ボタンを用意しました。この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タグのほうで、「文字を追加１」ボタンは、href="#"、 「文字を追加２」ボタンは、href="javascript:void(0)"を使っています。

<a href="#" id="exsf1" class="kahen-green" style="float:left;">
<span>文字を追加１</span>
</a>

<a href="javascript:void(0)" id="exsf2" class="kahen-green" style="float:left;">
<span>文字を追加２</span>
</a>

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

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