aタグのリンクを無効化する方法

htmlではリンクを設定するときにaタグを使いますが、まだリンク先を設定していない場合に、クリックできないように無効化しておくといいと思います。

よくリンク先を「#」や「/」にしているケースも多いかと思いますが、クリックされるとページトップに戻ってしまうので、そもそもクリックができないようにしておけば、ページトップに戻ることもありません。

CSSでリンクを無効化

一番簡単なのはCSSでリンクを無効化する方法で、「pointer-events: none;」を指定するだけです。

a {
　pointer-events: none;
}

基本的にほとんどのブラウザに対応していますが、IE10以前など、一部のブラウザでは効かない場合もあるので、その場合にはaタグにdisabled属性を設定しておくといいです。

一応CSS以外の方法も紹介しておこうと思います。

JavaScriptでaタグのリンクを無効化する方法は、aタグのhrefに「javascript:void(0)」を指定します。

jQueryでリンクを無効化することもでき、click()イベントを使って以下のように記述します。

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

CSS、JavaScript、jQueryを使ってaタグのリンクを無効化する方法を紹介しました。

あとはhref属性自体を使わないという方法も一応あります。