125naroom / デザインするところ(会社)です。

【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>

さいごに

きのこさん
おー、どれもシンプルですねー
きのこさん
さ、お散歩でも行きましょうかね

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
ちょっと思い出しただけ
【Google Chrome】ショートカットキーまとめ(Windows or Mac)