aリンクを無効にする方法 – JQuery、javascript、[#]リンク等 – How to disable links

どうもこんにちは。今日のtipsは【aリンクを無効にする方法 – JQuery、javascript、[#]リンク等 – How to disable links】です。頻度は低いですが何らかの操作のトリガーにリンクを使う際やテストサイトで使う場面がありますのでまとめておきます。

ハッシュ – 無効例

特定アンカーに飛ばす際に使う方法です。ただこの方法ではベージ内で移動してしまいます。

<a href="#">LINK</a>

javascript:void(0) – 無効例

javascriptを使う方法です。無効にするだけでしたらこの方法で問題ありませんがマウスオーバー時「javascript:void(0)」が表示されます（※ブラウザ依存）

<a href="javascript:void(0)">LINK</a>

jQuery – 無効例

移動もせず、リンク先も表示されませんので一番良い方法かと思います。ただしjQueryを事前に読み込ませておく必要があります。

<a href="https://zxcvbnmnbvcxz.com/">LINK</a>

$(function(){
	$(‘a’).click(function(){
		return false;
	})
});

上記の方法ですと全てのリンクが無効になります。ですので具体的には無効にしたい対象のリンクに「class=”disable”」等を付け、下記のような記述にするのが良いかと思います。

<a class="disable" href="https://zxcvbnmnbvcxz.com/">LINK</a>

$(function(){
	$(‘a.disable’).click(function(){
		return false;
	})
});

以上になります。