Verwenden Sie reines CSS, um das A-Tag in HTML ohne JavaScript zu deaktivieren

Verwenden Sie reines CSS, um das A-Tag in HTML ohne JavaScript zu deaktivieren
Tatsächlich ist dieses Problem bereits aufgetreten, als ich zum ersten Mal das Select-Tag in HTML gelernt habe. Bis heute habe ich noch keine Möglichkeit gefunden, das A-Tag mit reinem CSS zu deaktivieren. Ich habe meine Kollegen, Klassenkameraden und Lehrer gefragt und sie alle verwendeten JavaScript. Ist es wirklich notwendig, JavaScript zu verwenden?

1. Verwenden Sie reines CSS, um das A-Tag in HTML zu deaktivieren:

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<title>So deaktivieren Sie das A-Tag</title>
<metacontent="text/html; charset=GB2312"http-equiv="Inhaltstyp">
<style type="text/css">
Körper{
Schriftart: 12px/1,5 \5B8B\4F53, Georgia, Times New Roman, Serifen, Arial;
}
A{
Textdekoration: keine;
Umriss:0 keine;
}
.disableCss{
Zeigerereignisse: keine;
Farbe: #afafaf;
Cursor:Standard
}
</Stil>
</Kopf>
<Text>
<aclass="disableCss" href="http://www.baidu.com/">Baidu</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<aclass="disableCss" href="#"onclick="javascript:alert('Hallo!!!');">Klick</a>
</body>
</html>

Obwohl oben reines CSS zum Deaktivieren des „a“-Tags verwendet wird, kann der obige Code das „a“-Tag in diesen beiden Browsern nicht deaktivieren, da die Browser Opera und IE den Zeigerereignisstil nicht unterstützen.

2. Verwenden Sie Jquery und CSS, um das a-Tag in HTML zu deaktivieren:

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<title>02 ——Deaktivieren des a-Tags in HTML mit Jquery und CSS</title>
<meta content="text/html; charset=GB2312" http-equiv="Inhaltstyp">
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<Skripttyp="text/javascript">
$(Funktion() {
$('.disableCss').removeAttr('href'); //Entferne das href-Attribut im a-Tag
$('.disableCss').removeAttr('onclick'); //Entferne das Onclick-Ereignis im a-Tag
});
</Skript>
<style type="text/css">
Körper {
Schriftart: 12px/1,5 \5B8B\4F53, Georgia, Times New Roman, Serifen, Arial;
}
A {
Textdekoration: keine;
Gliederung: 0 keine;
}
.disableCss {
Farbe: #afafaf;
Cursor: Standard
}
</Stil>
</Kopf>
<Text>
<a class="disableCss" href="http://www.baidu.com/">Baidu</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="disableCss" href="#" onclick="javascript:alert('Hallo!!!');">Klick</a>
</body>
</html>

Diese Methode ist mit allen Browsern kompatibel, mischt jedoch JavaScript, was wahrscheinlich ein schwerwiegender Fehler ist! ! !

3. Verwenden Sie Jquery, um das A-Tag in HTML zu deaktivieren:

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<title>03 ——Deaktivieren des a-Tags in HTML mit Jquery</title>
<meta content="text/html; charset=GB2312" http-equiv="Inhaltstyp">
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<Skripttyp="text/javascript">
$(Funktion() {
$('.disableCss').removeAttr('href'); //Entferne das href-Attribut im a-Tag
$('.disableCss').removeAttr('onclick'); //Entferne das Onclick-Ereignis im a-Tag
$(".disableCss").css("Schriftart","12px/1,5 \\5B8B\\4F53, Georgia, Times New Roman, Serifenschrift, Arial");
$(".disableCss").css("text-decoration","none");
$(".disableCss").css("Farbe","#afafaf");
$(".disableCss").css("outline","0 keine");
$(".disableCss").css("cursor","default");
});
</Skript>
</Kopf>
<Text>
<a class="disableCss" href="http://www.baidu.com/">Baidu</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="disableCss" href="#" onclick="javascript:alert('Hallo!!!');">Klick</a>
</body>
</html>

Oben wird reines JQuery verwendet, um die Funktion zum Deaktivieren des a-Tags in HTML zu implementieren.

<<:  Eine kurze Analyse der CSS-Funktionen :is() und :where(), die bald in Browsern verfügbar sein werden

>>:  So legen Sie einen Alias ​​für einen benutzerdefinierten Pfad in Vue fest

Artikel empfehlen

Erfahren Sie mehr über MySQL-Datenbanken

Inhaltsverzeichnis 1. Was ist eine Datenbank? 2. ...

Tutorial zur Implementierung von Tabellenladebaumdaten in der Vue-Komponentenbibliothek ElementUI

ElementUI implementiert ein Tutorial zum Laden vo...

CocosCreator - modulares Lernskript

Modulares Cocos Creator-Skript Mit Cocos Creator ...

Detaillierter Prozess zur Installation von Presto und zum Verbinden von Hive in Docker

1. Einleitung Presto ist eine Open-Source-SQL-Abf...

SSH-Portweiterleitung zur Erzielung einer Intranet-Penetration

Die Maschinen in unserem LAN können auf das exter...

Detaillierte Erläuterung des MySql-Beispiels für automatische Kürzung

Detaillierte Erläuterung des MySql-Beispiels für ...

Detaillierte Erläuterung des chinesischen Konfigurationsschemas my.ini zur MySql-Optimierung: InnoDB, 4 GB Speicher und mehrere Abfragen

Dieser Artikel ist eine MySQL-Konfigurationsdatei...

So führen Sie SQL-Anweisungen automatisch aus, wenn MySQL in Docker gestartet wird

Wenn wir mit Docker einen MySQL-Container erstell...

Tools zum Konvertieren statischer Websites in RSS

<br /> Dieser Artikel wurde von Rachel Golds...

Methoden zur Verbesserung der Zugriffskontrollsicherheit im Linux-Kernel

Hintergrund Vor einiger Zeit half unser Projektte...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17

Funktionen von MySQL: MySQL ist ein relationales ...

Detaillierte Erläuterung des Datenproxys und der Ereignisse von VUE

Inhaltsverzeichnis Überprüfung der Object.defineP...

Detaillierte Erklärung der MySQL information_schema-Datenbank

1. Übersicht Die Datenbank information_schema ist...

Beispieldemonstration der Vuex-Modularisierung und Namespaces

1. Zweck: Machen Sie den Code leichter wartbar un...

So verwenden Sie vw+rem für das mobile Layout

Verwenden Sie immer noch das flexible Rem-Layout?...