1. ホーム
  2. html

[解決済み] HTMLのアンカータグをCSSでクリック/リンクできないようにすることは可能ですか?

2022-04-25 10:33:47

質問

例えば、こんなのがあったら。

<a style="" href="page.html">page link</a>

リンクがクリックできず、page.htmlに飛ばないようにするために、style属性に何か使えるものはないでしょうか?

それとも、'page link' をアンカータグでくくらないようにするしかないのでしょうか?

編集してください。 私は人々がより良いアドバイスを提供することができるかもしれないので、私がこれをしたい理由を述べたいと思います。私は、開発者が好きなタイプのナビゲーションスタイルを選択できるように、アプリケーションをセットアップしようとしています。

そこで、リンクのリストがあり、1つは常に現在選択されていて、他のすべては選択されていません。選択されていないリンクについては、当然ながら、通常のクリック可能なアンカータグにしたいと思います。しかし、選択されているリンクについては、リンクがクリック可能であることを好む人もいれば、クリックできないようにすることを好む人もいます。

今、私は簡単にプログラムで選択されたリンクの周りにアンカータグをラップしないようにすることができます。しかし、選択したリンクを常に次のようなもので囲むことができれば、よりエレガントになると思います。

<a id="current" href="link.html">link</a>

を作成し、開発者がCSSでリンクスタイルを制御できるようにします。

解決方法は?

このCSSを使用することができます。

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

そして、そのクラスをhtmlコードに割り当ててください。

<a style="" href="page.html" class="inactiveLink">page link</a>

リンクがクリックできなくなり、カーソルスタイルがリンクのように手ではなく、矢印になります。

または、このスタイルをhtmlで使用します。

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

が、私は最初の方法を提案します。