Entfernen Sie das Etikett und die Schaltfläche und fügen Sie das Hintergrundbild mit gepunkteter Linie/Schatten hinzu, perfekte Lösung

Wenn sich ein Benutzer registriert, klickt er auf ein Label, um den Bestätigungscode zu ändern. Wenn Sie darauf klicken, wird auf dem Etikett ein Schattenteil angezeigt. Für ästhetisch anspruchsvolle Studierende ist das jedoch unerträglich!

完美去掉a標簽和按鈕加背景圖片陰影

Was ist der Grund dafür? Es stellt sich heraus, dass das href-Attribut des a-Tags schuld ist.

1. Nur ein Tag

Mir sind zwei Lösungen bekannt.

Erstens: Verschreiben Sie das richtige Medikament für die Krankheit. Da es durch href verursacht wird. Entfernen Sie dann das href-Attribut

Wenn wir href=javascript:RefreshCode(); verwenden, aktualisieren wir einfach den Bestätigungscode. Kein Seitensprung.

Code kopieren

Der Code lautet wie folgt:

<ahref="javascript:RefreshCode();"class="yellow">Sie können nicht klar sehen? Bild ändern</a>

Sie können also href entfernen, dem a-Tag ein Onclick-Ereignis hinzufügen und die Funktion zum Aktualisieren des Bestätigungscodes aufrufen.

Code kopieren

Der Code lautet wie folgt:

<aonclick="RefreshCode()"class="yellow">Sie können nicht klar sehen? Bild ändern</a>

Zweitens: Machen Sie einen Schritt zurück. Suchen Sie nach Gemeinsamkeiten und wahren Sie die Unterschiede. Da Sie das href-Attribut verwenden möchten. In Ordnung. Dann füge ich noch ein weiteres Event für dich hinzu: onfocus

Ändern Sie es einfach und Sie können es problemlos entfernen, indem Sie dem A-Tag onfocus="this.blur()" hinzufügen.

sicherlich. Wenn Sie möchten, dass das A-Tag nicht unterstrichen wird. Dann: style="text-decoration: none"

Code kopieren

Der Code lautet wie folgt:

<a href="javascript:RefreshCode();"class="yellow"onfocus="this.blur()">Sie können nicht klar sehen? Bild ändern</a>

Wirkung nach Änderung

完美去掉a標簽和按鈕加背景圖片陰影

In FF und anderen Browsern ist es relativ einfach. Definieren Sie einfach den Stil outline:none für das Tag a, das heißt:

Code kopieren

Der Code lautet wie folgt:

ein { Umriss: keiner; }

Natürlich wird hier nur ein einziger entfernt. Wenn es auf der Seite mehrere A-Tags gibt, sollten wir dann nicht die Onfocus-Ereignisse einzeln hinzufügen?

Natürlich nicht. Wir können dies tun, wenn die Seite geladen wird. Holen Sie sich alle A-Tags auf der Seite über: window.document.links.length (window kann hier weggelassen werden). Dann iterieren Sie über die registrierten Ereignisse.

Code kopieren

Der Code lautet wie folgt:

<scripttype="text/javascript">
fenster.onload = funktion(){
für (var i = 0; i < Dokument.links.Länge; i++)
Dokument.links[i].onfocus=function(){dies.blur()}
}
</Skript>

2. Fügen Sie der Schaltfläche ein Hintergrundbild hinzu:

Eine andere Möglichkeit besteht darin, der Schaltfläche ein Hintergrundbild hinzuzufügen. Es wird Schatten geben.

完美去掉a標簽和按鈕加背景圖片陰影

Derselbe Ansatz kann auch verwendet werden, um

Code kopieren

Der Code lautet wie folgt:

<asp:Button ID="imgBtnReg" runat="server"onfocus="this.blur()" OnClientClick="return chk_reg();"OnClick="imgBtnReg_Click" Text="Übermittlung bestätigen"/>
<input type="submit"id="btnReg" value="Registrierung" name="regist" onfocus="this.blur()"onclick="return checkAll()" style="background-image:url('image/btn.jpg')"/>

Wirkung nach Änderung:

完美去掉a標簽和按鈕加背景圖片陰影

3. Wenn Sie ein a-Tag zu img hinzufügen, fügen Sie onfocus zum a-Tag hinzu und setzen Sie das border-Attribut von img: border=0

Code kopieren

Der Code lautet wie folgt:

Wenn Ihre Seite beides hat, ein Tag. Da ist wieder ein Knopf. Sie können es in eine Funktion einbinden

Code kopieren

Der Code lautet wie folgt:

Funktion fHideFocus(tName){
aTag=document.getElementsByTagName_r(tName);
für (i = 0; i <aTag.length; i++) aTag.hideFocus = true;
//für(i=0;i<aTag.length;i++)aTag.onfocus=function(){this.blur();};
}

Derzeit wird ein HideFocus-Attribut hinzugefügt und sein Wert ist ein Boolescher Wert, z. B. hideFocus=true. Sie können die Zuweisung auch weglassen und hideFocus direkt ausführen.

Wenn der Code nicht über hideFocus verfügt, wird beim Klicken mit der Maus auf den Hyperlink außerhalb ein gepunktetes Kästchen angezeigt, das den Fokus anzeigt. Wenn hideFocus verwendet wird, gibt es keinen gepunkteten Rahmen.

Der auskommentierte Satz soll onfucus = this.blur(); hinzufügen, was denselben Effekt hat.
Rufen Sie dann fHideFocus("A"); auf, um den gepunkteten Rahmen von a zu entfernen. Sie können verschiedene gepunktete Rahmen entfernen, indem Sie verschiedene Parameter übergeben. Beispielsweise kann "BUTTON" den gepunkteten Rahmen von button entfernen, aber denken Sie daran, dass die Parameter Großbuchstaben sein müssen.

Erweiterungen:

A. Wie entferne ich die gepunkteten Linien von Links innerhalb eines Kartenbereichs?

Dies ist ein konzeptioneller Fehler. Tatsächlich sollte es auf dem Kartenbild und nicht auf dem Gebiet kontrolliert werden. Siehe die traditionelle Methode

B. Über onFocus

Code kopieren

Der Code lautet wie folgt:

Unter ihnen wird onfocus verwendet, um das Mausfokusereignis festzulegen. Dies kann verwendet werden oder nicht. Damit jedoch mehr Browser es erkennen können, wird empfohlen, border=0 zu verwenden. Dies ist der Schlüssel zum Entfernen des gepunkteten Rahmens (im Internet verwenden die meisten Leute onfocus="this.blur()", um den gepunkteten Rahmen zu entfernen, aber manchmal kann dieser Satz allein ihn nicht entfernen).

Für die Experten sind die Wissenspunkte bereits stark veraltet. Aber für Freunde, die gerade erst damit in Berührung gekommen sind, ist es eine willkommene Erleichterung, und ich bin heute zufällig darauf gestoßen. Daher wird es hier aufgezeichnet. Wissen muss Stück für Stück angesammelt werden.

<<: Einführung in neue ECMAscript-Objektfunktionen

>>: Detaillierte Einführung in CSS-Schrift-, Text- und Listeneigenschaften

Entfernen Sie das Etikett und die Schaltfläche und fügen Sie das Hintergrundbild mit gepunkteter Linie/Schatten hinzu, perfekte Lösung

Vue3 erhält die aktuelle Routingadresse

So kompilieren und installieren Sie PHP und Nginx in einer Ubuntu-Umgebung

Zusammenfassung einiger Situationen, in denen die Docker-Containerfestplatte voll ist

So verwenden Sie fdisk zum Partitionieren der Festplatte in Linux

Grundlagen zu Betrieb und Wartung unter Linux - Tutorial zu statischen httpd-Webseiten

Eine kurze Analyse der Zählverfolgung einer Anfrage in nginx

Detaillierte Analyse von GUID-Anzeigeproblemen in Mongodb

Einführung in mögliche Probleme nach der Installation von Tomcat

Detaillierte Erläuterung der Verwendung des Baidu-Stils in Eslint im React-Projekt

Lösung für das Problem, dass VC6.0 bei Installation unter WIN10 nicht verwendet werden kann

Artikel empfehlen

Implementieren eines Webplayers mit JavaScript

Bewertungsregeln von YSlow, einem von Yahoo entwickelten Webseiten-Bewertungs-Plugin

Implementieren Sie Group By basierend auf MySQL, um die neuesten Daten jeder Gruppe zu erhalten

Analyse der Implementierungsschritte für geteilte Festplattenpartitionen unter Linux

Verwendung von Vue3-Seiten, Menüs und Routen

jQuery implementiert einen prozentualen Fortschrittsbalken

Detaillierte Erläuterung der benutzerdefinierten Anweisungen zur Vue.js-Quellcodeanalyse

MySQL-Datenbankoptimierung: Detaillierte Erläuterung der Sharding-Operationen für Tabellen und Datenbanken

Implementierung der Alibaba Cloud OSS-Zugriffsrechtekonfiguration (RAM-Berechtigungskontrolle)

Webdesign-Tutorial (1): Schritte und Gesamtlayout

Detaillierte Erklärung der Beziehung zwischen React und Redux

Analyse und Zusammenfassung der Auswirkungen von MySQL-Transaktionen auf die Effizienz

32 typische spalten-/rasterbasierte Websites

Probleme mit Vue, das die Homepage von Bibibili imitiert

Tutorial zur HTML-Tabellenauszeichnung (16): Attribut für horizontale Titelausrichtung ALIGN