JavaScript を使用せずに HTML の a タグを無効にするには、純粋な CSS を使用します。

実際、この問題は、HTML の select タグを初めて学んだときにすでに発生していました。今日に至るまで、純粋な CSS を使用して a タグを無効にする方法がまだ見つかっていません。同僚、クラスメート、教師に尋ねたところ、全員が JavaScript を使用していました。JavaScript を使用する必要があるのでしょうか?

1. 純粋な CSS を使用して HTML 内の a タグを無効にします。

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<title>a タグを無効にする方法</title>
<metacontent="text/html; charset=GB2312"http-equiv="コンテンツタイプ">
<スタイルタイプ="text/css">
体{
フォント:12px/1.5 \5B8B\4F53、ジョージア、Times New Roman、セリフ、arial;
}
{
テキスト装飾:なし;
アウトライン:0 なし;
}
.disableCss{
ポインタイベント:なし;
色:#afafaf;
カーソル:デフォルト
}
</スタイル>
</head>
<本文>
<aclass="disableCss" href="http://www.baidu.com/">バイドゥ</a>
       
<aclass="disableCss" href="#"onclick="javascript:alert('Hello!!!');">クリック</a>
</本文>
</html>

上記では a タグを無効にするために純粋な CSS が使用されていますが、Opera および IE ブラウザはポインターイベントスタイルをサポートしていないため、上記のコードではこれら 2 つのブラウザで a タグを無効にすることはできません。

2. JQuery と CSS を使用して HTML の a タグを無効にします。

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<title>02 —— JQuery と CSS を使用して HTML の a タグを無効にする</title>
<meta content="text/html; charset=GB2312" http-equiv="コンテンツタイプ">
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$(関数() {
$('.disableCss').removeAttr('href'); //aタグのhref属性を削除します
$('.disableCss').removeAttr('onclick'); //aタグ内のonclickイベントを削除します
});
</スクリプト>
<スタイルタイプ="text/css">
体 {
フォント: 12px/1.5 \5B8B\4F53、Georgia、Times New Roman、serif、arial;
}
{
テキスト装飾: なし;
アウトライン: 0 なし;
}
.disableCss {
色: #afafaf;
カーソル: デフォルト
}
</スタイル>
</head>
<本文>
<a class="disableCss" href="http://www.baidu.com/">バイドゥ</a>
       
<a class="disableCss" href="#" onclick="javascript:alert('Hello!!!');">クリック</a>
</本文>
</html>

この方法はすべてのブラウザと互換性がありますが、JavaScript が混在しており、おそらく致命的な欠陥があります。！！

3. JQuery を使用して HTML の a タグを無効にします。

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<title>03 —— JQuery で HTML の a タグを無効にする</title>
<meta content="text/html; charset=GB2312" http-equiv="コンテンツタイプ">
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$(関数() {
$('.disableCss').removeAttr('href'); //aタグのhref属性を削除します
$('.disableCss').removeAttr('onclick'); //aタグ内のonclickイベントを削除します
$(".disableCss").css("font","12px/1.5 \\5B8B\\4F53, Georgia, Times New Roman, serif, arial");
$(".disableCss").css("テキスト装飾","なし");
$(".disableCss").css("color","#afafaf");
$(".disableCss").css("アウトライン","0 なし");
$(".disableCss").css("カーソル","デフォルト");
});
</スクリプト>
</head>
<本文>
<a class="disableCss" href="http://www.baidu.com/">バイドゥ</a>
       
<a class="disableCss" href="#" onclick="javascript:alert('Hello!!!');">クリック</a>
</本文>
</html>

上記では、HTML 内の a タグを無効にする機能を実装するために、Pure Jquery が使用されています。

<<: 近々ブラウザに導入される CSS :is() と :where() の簡単な分析

>>: Vue でカスタムパスのエイリアスを設定する方法