<a>タグでリンク要素を複数作ったけど、まだ一部リンク先がない。
<a>タグに付けている効果は無くしたくない
今回は、そのような場合に、ホバー効果も残しつつ、クリックさせてもどこにも移動もさせない<a>タグを残したまま『リンクを無効』する方法をご紹介します。
Contents
aタグを使用したリンクの無効化
<a>タグを使用したままリンクだけを無効にしたい場合があるかと思います。
よくある方法では、リンク先を下記のように「#」や「/」にする方法があります
HTML
<a href="#">○○</a><a href="/">○○</a>しかし、上記の方法だとクリックされるとページトップ（上部）に戻ってしまうので、この方法もしたくない…
「かといってホバー効果も無くしたくないし<a>タグを<span>にしたり書き直すのもまたCSSに書き足さないと…いま無効にしたいだけなの！！」
のような方もいるかと思います。（私がそうでした笑）
今回は、そのような場合に、ホバー効果も残しつつ、クリックさせてもどこにも移動もさせない<a>タグを残したまま『リンクを無効』する方法をご紹介します。
リンクの無効化とは？
実際にリンクの無効化ってどういうこと？
と思う方もいらっしゃると思うので、参考として下記に簡単なリンクボタンを作成してみました。
通常のリンクボタン
上記をクリックしてみると、この記事のトップに移動するかと思います。
この状態は、下記のようにリンクに「#」を使っています。
<a href="#">LINK</a>これだと、ホバー効果もあるまま<a>タグも使えるので
「とりあえず今はまだリンク先がない」
のような場合や、LP（ランディングページ）等の納品時に
『リンク先は未定だけど、ここにリンクが入ります。』
という意味で使用したり、その場しのぎのような場合にも使うことがあります。
納品等の時は「#」や「/」で問題ないですが、既に公開されているWebページ等ではあまり使いたくないなぁ、と思うこともあります。
<a>タグを無くしたボタン
上記はコードから<a>タグごと消したパターンになります。
クリックすることもできませんが、元々<a>タグに指定していた効果や指定も、もちろんですが一緒になくなってしまいました。
リンクを無効化したボタン
上記はリンクを無効化したボタンです。
ホバー効果も<a>タグへの指定も残ったままクリックだけができないようになっています。
このように”リンクのみを無効化する方法”にはいくつかの方法があります。
ここから詳しくご紹介していきます。
CSSで指定上記のようにaタグに今回は「disabled」という名前でクラスの設定をしました。
CSS
a.disabled{
pointer-events: none;
}
<a href="#" class="disabled">LINK</a>
「disabled」とは「無効」という意味でコードでは無効化させたい要素に指定する時にも使われる属性名です。
上記のボタンはホバー効果もそのままにクリックも無効になっています。
しかし上記の記述のみの場合「tab」などでタブ移動の際はフォーカスされてしまいます。
フォーカスもされたくない場合は下記のように「 tabindex=”-1″」を記述してください。
HTML
<a href="#" class="disabled" tabindex="-1">LINK</a>
タブ移動でもフォーカスされなくなりましたね。
ブラウザによって効かない場合
上記だとブラウザによっては効かない場合があります。
その場合には、
HTML
<a href="#" disabled="disabled" tabindex="-1">LINK</a>とクラスではなく「disabled属性」にすることによって対応できるようです。
JavaScript
<a href="javascript:void(0)" tabindex="-1">LINK</a>JavaScriptで設定したい場合は、hrefの値に「”javascript:void(0)”」を設定することでリンクを無効化できます。
jQuery
jQueryでリンクを無効化したい場合は、
javaScript
$('a.jquery-disabled').click(function() { return false; });HTML
<a href="#" class="jquery-disabled" tabindex="-1">LINK</a>上記の記述でリンクを無効化できます。
href属性自体を使わない
個人的にはこの方法は一番簡単で手っ取り早い方法かと思います。
リンク先を指定するには「href=””」という記述の『href属性』を使いますが、この方法はhref属性自体を使わない方法となります。
HTML
<a tabindex="-1">LINK</a>これだけです！
この方法を上記のリンクボタンで使用すると
上記の方法はクリックはできますが何も起きません。
基本的にブラウザ関係なくリンクも無効化できるので、これで十分な状況も多いかもしれませんね。
まとめ
今回はリンクの無効化の方法を紹介しました。
リンクを無効化したい場合は、自分の用途や状況に合う方法で上記を参考にしてみてください。
