So verwenden Sie JavaScript-Hyperlinks

So verwenden Sie JavaScript-Hyperlinks

Hyperlinks sind häufige Elemente in Webseiten, die verschiedene Seiten oder verschiedene Websites verbinden, und JavaScript bietet Komfort beim Hinzufügen dynamischer interaktiver Effekte zu Webseiten. Wenn beides kombiniert wird, kann die Webseite dynamischer und praktischer gestaltet werden. In diesem Artikel wird die Verwendung und Implementierung von JavaScript-Hyperlinks im Detail vorgestellt.

1. Grundkenntnisse

In HTML wird ein Hyperlink mithilfe des -Tags definiert, wie unten gezeigt:

Linktext

Unter anderem identifiziert das href-Attribut die URL, auf die der Hyperlink verweist. Wenn Sie einen Hyperlink auf einen Ankerpunkt auf der aktuellen Seite verweisen müssen, können Sie das „#“-Symbol plus den Ankernamen als URL verwenden, wie unten gezeigt:

Zum ersten Abschnitt springen

Darüber hinaus das -Tag ist auch in Ordnung. Verwenden Sie das Zielattribut, um anzugeben, wie der Link geöffnet wird. Zu den häufig verwendeten Werten gehören _blank, _self, _parent und _top, was jeweils das Öffnen in einem neuen Fenster, das Öffnen im aktuellen Fenster, das Öffnen im übergeordneten Fenster und das Öffnen im gesamten Fenster bedeutet. Zum Beispiel:

Öffnen Sie den Link in einem neuen Fenster

2. So implementieren Sie JavaScript-Hyperlinks

1. Standardmäßiges Sprungverhalten verhindern

In manchen Fällen ist es notwendig, das Springen des Hyperlinks zu verhindern und ihn einfach auszuführen Etwas JavaScript-Code. Zu diesem Zeitpunkt können Sie die Methode „preventDefault()“ verwenden, um das Standardsprungverhalten zu verhindern, zum Beispiel:

Kein Sprung, JS-Code ausführen

Im obigen Code die Anweisung event.preventDefault() im onclick-Ereignis Die Handler-Funktion kann die standardmäßige Sprungübertragung verhindern, und Sie können später beliebigen JavaScript-Code hinzufügen.

2. Ändern Sie das href-Attribut des Links.

In einigen Fällen ist es erforderlich, das href-Attribut des Hyperlinks dynamisch zu ändern, um Sprunglinks basierend auf Benutzervorgängen oder Datenstatus dynamisch zu generieren. Beispiel:

Zum Springen klicken

<script></p> <pre class="brush:php;toolbar:false">document.querySelector(&quot;#myLink&quot;).addEventListener(&quot;click&quot;, function(){     var targetUrl = &quot;http://www.example.com?id=&quot; + getUserId();     this.href = targetUrl; });</pre> <p></script>

Im obigen Code wird über die Methode addEventListener() ein Click-Event-Handler zum myLink-Hyperlink hinzugefügt Der Benutzer klickt auf Beim Verknüpfen ruft der JavaScript-Code die Ziel-URL basierend auf der aktuellen Benutzer-ID ab und setzt das href-Attribut des myLink-Hyperlinks auf die Ziel-URL.

3. Link in neuem Fenster öffnen

In manchen Fällen ist es notwendig, Hyperlinks in neuem Fenster zu öffnen. Zu diesem Zeitpunkt können Sie die Methode window.open() verwenden, um dies zu erreichen. Übergeben Sie die Ziel-URL und die voreingestellten Fenstereigenschaften in die Methode, zum Beispiel:

Öffnen Sie den Link in einem neuen Fenster

Oben Code wird der Onclick-Ereignishandler aufgerufen. Übergeben Sie der Methode window.open() die Ziel-URL und das Attribut _blank, um den Link in einem neuen Fenster zu öffnen.

4. Ändern Sie die Scrollposition der Seite

In manchen Fällen müssen Sie die Scrollposition der Seite ändern, nachdem Sie auf einen Hyperlink geklickt haben, um zu einem Ankerpunkt auf der Seite zu springen. Zu diesem Zeitpunkt können Sie den Ankernamen im href-Attribut des Hyperlinks angeben und JavaScript-Code hinzufügen, um die Bildlaufposition der Seite zu ändern, zum Beispiel:

Zum ersten Abschnitt springen