Heim Web-Frontend HTML-Tutorial So setzen Sie den HTML-Hyperlink beim Klicken auf Grau

So setzen Sie den HTML-Hyperlink beim Klicken auf Grau

Mar 04, 2021 pm 04:40 PM
html 超链接

So setzen Sie den Hyperlink beim Klicken in HTML auf Grau: Laden Sie zuerst die Funktion, um den Hyperlink zu finden, ersetzen Sie dann das []-Tag und betten Sie es schließlich in das

ein ;-Tag []-Tag, die Farbe von [] ist auf Grau gesetzt.

So setzen Sie den HTML-Hyperlink beim Klicken auf GrauDie Betriebsumgebung dieses Tutorials: Windows7-System, HTML5-Version, DELL G3-Computer.

So machen Sie einen Hyperlink grau, wenn Sie in den HTML-Einstellungen darauf klicken:

1. HTML-Hyperlinks finden

Wenn Sie einen Hyperlink ungültig und grau machen möchten, müssen Sie zunächst den Hyperlink finden . Es gibt viele Möglichkeiten, Hyperlinks zu finden. Wenn Sie die W3C-Methode verwenden, lautet diese wie folgt:

document.getElementsByTagName("a")
Nach dem Login kopieren

Wenn Sie der Meinung sind, dass die W3C-Methode zu lang oder unansehnlich ist, können Sie einige JavaScript-Bibliotheken wie jQuery oder Mootools verwenden. Hyperlinks auf diese Weise zu erhalten ist sehr einfach.

Sie können auch die Methode des Hinzufügens einer ID zum <a></a>-Tag verwenden, es gibt jedoch einen kleinen Nachteil. Wenn Sie einen Hyperlink zum gesamten Artikel erstellen, erhöht diese Methode zum Hinzufügen einer ID den Arbeitsaufwand.

2. Ändern Sie den HTML-Hyperlink

Nachdem Sie den Hyperlink gefunden haben, müssen Sie ihn als Nächstes ändern, sodass er ungültig und grau wird. Es gibt mehrere Möglichkeiten, einen Hyperlink ungültig zu machen. Die häufigste besteht darin, das href-Attribut auf „#“ zu setzen. Tatsächlich ändert diese Methode den Hyperlink überhaupt nicht, sondern führt lediglich dazu, dass das href-Attribut nicht auf einen sinnvollen Link verweist.

Die Möglichkeit, einen Hyperlink wirklich zu ändern, besteht darin, ihn in normalen Text umzuwandeln, und die Schriftfarbe des Textes ist Grau. Es hat folgenden Effekt:

So setzen Sie den HTML-Hyperlink beim Klicken auf Grau

Okay, genug geredet, kommen wir zur Sache. Der folgende Code führt eine Funktion aus, sobald das HTML-Dokument geladen wird.

var addLoadEvent=function(func) {
    var oldonload = window.onload;
    if (typeof window.onload != &#39;function&#39;) {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
};
Nach dem Login kopieren

Diese Funktion dient zum späteren Laden der Funktion zum Suchen von Hyperlinks. Im Folgenden wird der Hyperlink im HTML-Dokument abgerufen und ungültig und grau gemacht.

var getLinks=function() {
if(!document.getElementsByTagName)return false;
if(!document.createElement)return false;
if(!document.getElementsByName("a"))return false;
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        //判断href属性是否包含“#”符号
        if ((links[i].getAttribute("href").indexOf("#")) >= 0) {
            var para = document.createElement("p");
            var fon = document.createElement("font");
            fon.setAttribute("color", "#808080");
            fon.innerHTML =links[i].lastChild.nodeValue;
            var content = para.appendChild(fon);
            replaceEach(links[i], content);
        } else {
            links[i].style.color = "990033";
        }
    }
};
Nach dem Login kopieren

Durch das Lesen des obigen Codes glaube ich, dass der Leser ihn verstanden hat. Die Möglichkeit, einen Hyperlink zu ändern, besteht darin, das Tag durch

zu ersetzen. Und das -Tag ist in das

-Tag eingebettet und die Farbe von ist auf Grau eingestellt, was den gewünschten Effekt erzielt.

Es wird die Ersetzungsfunktion „replaceEach“ verwendet. Der Code der „replaceEach“-Funktion ist unten angegeben.

Vergessen Sie zum Schluss nicht den wichtigsten Schritt: Laden Sie die Suchfunktion wie folgt in die Funktion addLoadEvent:

Verwandte Lernempfehlungen: HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo setzen Sie den HTML-Hyperlink beim Klicken auf Grau. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles