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

Detaillierte Erklärung des JavaScript-Proxy-Objekts

Inhaltsverzeichnis 1. Was ist ein Proxy? 2. Wie w...

So ändern Sie den vorherigen Befehl, wenn in der MySQL-Eingabeaufforderung ein Eingabefehler auftritt

Inhaltsverzeichnis Aktuelle Themen Lösungsprozess...

mysql8.0: Passwortänderung vergessen und Problem mit ungültigem Net-Befehlsdienstnamen

Geben Sie net start mysql in cmd ein und die Eing...

MySQL-Reihe von Erfahrungszusammenfassungen und Analyse-Tutorials zu NULL-Werten

Inhaltsverzeichnis 1. Testdaten 2. Die Unannehmli...

Detaillierte Erklärung der Verwendung und Unterschiede verschiedener Sperrmechanismen in Linux

Vorwort: Ich glaube, dass diejenigen, die dieses ...

Stimmt es, dass der Webdesign-Stil umso besser ist, je einfacher er ist?

Ursprüngliche Adresse: http://www.webdesignfromsc...

Beispielcode für die Verwendung von @media in CSS3 zur Anpassung einer Webseite

Heutzutage wird die Bildschirmauflösung von Compu...

FEHLER 1045 (28000): Zugriff verweigert für Benutzer ''root''@''localhost'' (mit Passwort: JA) Praktische Lösung

Gestern gab es keine Probleme beim Herstellen ein...

Zusammenfassung der Diskussion zur Gültigkeitsdauer von Nginx-Cookies

Bei jedem Besuch wird im Browser Cookie generiert...

Grafisches Tutorial zur Installation von VMware15.5 und Ubuntu20.04

1. Vorbereitung vor der Installation 1. Laden Sie...

Eine elegante Möglichkeit, die Autorisierungsanmeldung für WeChat-Applets zu handhaben

Vorwort Wenn das WeChat-Miniprogrammprojekt das A...

Linux Redis-Sentinel-Konfigurationsdetails

herunterladen Download-Adresse: https://redis.io/...

js, um den Effekt des Ziehens des Schiebereglers zu erzielen

In diesem Artikel finden Sie den spezifischen Cod...

So konfigurieren Sie die Basic Auth-Anmeldeauthentifizierung in Nginx

Manchmal erstellen wir einen Dateiserver über ngi...

MySQL-Sequenz AUTO_INCREMENT ausführliche Erklärung und Beispielcode

MySQL-Sequenz AUTO_INCREMENT ausführliche Erkläru...