CSS のみを使用してリンクを無効にするにはどうすればよいですか?

CSS によるリンクの無効化: 完全ガイド

Web ページ上のリンクを無効にする必要がありますが、リンクの設定は CSS のみに依存しますか?解決？自由に使える簡単な解決策があるので心配しないでください。

課題

リンクのあるナビゲーション バーがあり、リンクの 1 つが現在のページを表していると想像してください。あなたはオンです。このリンクを無効にして、クリックしても何もアクションが起こらないようにしたいと考えています。

CSS ソリューション

この無効化を実現するには、 aria-current="page" 属性を活用できます。この属性は、要素が現在のページを表すことを示します。この属性を持つ要素に次の CSS ルールを適用すると、リンクを無効にすることができます:

[aria-current="page"] {
  pointer-events: none; // Prevents any cursor interaction
  cursor: default; // Resets the cursor to its default appearance
  text-decoration: none; // Removes any underlining
  color: black; // Restores the text color to black
}

実践例

このソリューションを HTML に適用するには、次のようにします。 aria-current="page" 属性を に追加します。

<a href="link.html" aria-current="page">Link</a>

この CSS ソリューションを実装すると、リンクの外観を変更したり JavaScript に頼ったりすることなく、リンクを効果的に無効にすることができます。この手法により、ユーザーが現在どのページを表示しているかを明確に示し、クリーンでアクセスしやすいユーザー インターフェイスが保証されます。

以上がCSS のみを使用してリンクを無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。