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

【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さんのおすすめ

デザインの記事

大阪の写真スタジオ|かしこまらない写真館「日日花(にちにちか)」
大阪の写真スタジオ|かしこまらない写真館「日日花(にちにちか)」
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう