【HTML】aタグのリンクを無効にする、スタイル(CSS)はそのままで

きのこさん
aタグのリンクだけを無効にできたりしますかー?
きのこさん
できますよー、いろんな方法があるのでお気に召すのでどうぞー

簡単にtabindexだけを使う(href属性は使わない)

うーん、これ、とってもおすすめです。
IEでも問題ないです。
ブラウザによって効かない場合も、ないです。
ホバー(hover)が不要な場合は『pointer-events: none;』のクラス付けをしておきましょう。

See the Pen
aタグのリンクを無効にする、スタイル(CSS)はそのままで
by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<a tabindex="-1" class="_a">詳しくはこちら</a>

jQueryを使う

jQueryを使うのもいいですね。
クラス指定してあげるだけでオッケーです。
ホバー(hover)が不要な場合は『pointer-events: none;』のクラス付けをしておきましょう。

See the Pen
aタグのリンクを無効にする、簡単にtabindexを使う(href属性は使わない)
by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<a href="#" class="_a disabled">詳しくはこちら</a>

jQuery

$('a.disabled').click(function() { return false; });

JavaScriptを使う

JavaScriptを使うのもいいですね。
リンク先指定に直接書くだけです。
ホバー(hover)が不要な場合は『pointer-events: none;』のクラス付けをしておきましょう。

See the Pen
aタグのリンクを無効にする、JavaScriptを使う
by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<a href="javascript:void(0)" class="_a">詳しくはこちら</a>

さいごに

きのこさん
おー、どれもシンプルですねー
きのこさん
さ、お散歩でも行きましょうかね
デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

ミトネデザイン|高知の山奥にあるデザイン事務所
ミトネデザイン|高知の山奥にあるデザイン事務所
ちょっと思い出しただけ
『点』、登場人物は3人だけ