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

【HTML】aタグのリンクを無効にする、スタイル(CSS)はそのままで
きのこさん
aタグのリンクだけを無効にできたりしますかー?
きのこさん
できますよー、いろんな方法があるのでお気に召すのでどうぞー

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

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

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

HTML

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

jQueryを使う

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

See the Pen aタグのリンクを無効にする、jQueryを使う 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>

さいごに

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

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

4

/

20

2024

Googleさんの
おすすめ

4

/

20

2024

デザインの記事

メリット
  • 2024.04.19New
  • メリット
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
5年経った無印良品窓の家
【jQuery】 ローディング、実装サンプル集