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>
       
<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>
       
<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>
       
<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

So lösen Sie das Problem verstümmelter chinesischer Zeichen beim Einfügen von Tabellendaten in MySQL

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

So lösen Sie das Problem verstümmelter chinesischer Zeichen beim Einfügen von Tabellendaten in MySQL

Flex-Layout erreicht feste Anzahl von Zeilen pro Zeile + adaptives Layout

Zehn Erfahrungen bei der Präsentation chinesischer Webinhalte

So löschen Sie Datensätze in MySQL automatisch vor einer bestimmten Zeit

Beispielanalyse der drei Verbindungsmethoden für virtuelle VMware-Maschinen

Schritte zum Öffnen des MySQL-Binlogs

VMware implementiert den detaillierten Prozess der unbeaufsichtigten PXE+Kickstart-Installation des Centos7-Systems

Detaillierte Erläuterung der Installations-, Konfigurations-, Start- und Herunterfahrmethoden des MySQL-Servers

Detaillierter Prozess zur Installation des Docker-Plugins in IntelliJ IDEA (Version 2018)

Verwenden Sie Vue3 zur Datenbindung und Anzeigelistendaten

Artikel empfehlen

Über das Problem beim Ausführen von Git-Programmen in von Docker bereitgestellten Jenkins

Detaillierte Erläuterung der zugrunde liegenden Implementierung des absteigenden Index, einer neuen Funktion von MySQL 8

Detailliertes Tutorial zum Bereitstellen einer benutzerdefinierten Apollo-Umgebung mit Docker-Compose

Beschreibung der Ausführungsmechanismen von statischen Seiten und dynamischen Seiten

Ein praktischer Bericht zur Fehlerbehebung bei einem Anstieg der Redis-Verbindungen in Docker

JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion

Grafisches Tutorial zur Installation und Konfiguration von Win32 MySQL 5.7.27

Lösung für das Verschwinden des MySql-Dienstes aus unbekannten Gründen

Mysql 5.6 fügt eine Methode zum Ändern von Benutzername und Passwort hinzu

Implementierungsschritte für Docker-Compose zum Bereitstellen eines etcd-Clusters

Analyse des Verwendungsbeispiels für den Common Table Expression CTE in mysql8

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

So fügen Sie Wettervorhersagen in Ihre Website ein

TypeScript-Dekorator-Definition

So schreiben Sie mit nodejs ein Tool zur Generierung von Entitätsklassen für Datentabellen für C#