An einem Beispiel wird erläutert, wie Sie mit HTML durch Klicken auf das Button-Element zur Seite springen.

In HTML können Sie das -Tag verwenden, um zu einer Seite zu springen, aber wie springt man über eine Schaltfläche zu einer Seite? Dies erfordert die Verwendung des -Tags in HTML. In diesem Artikel erfahren Sie, wie Sie durch Klicken auf das Button-Element in HTML zur Seite springen.

1. Grundlegende Syntax von HTML Button

Um HTML Button zum Implementieren des Seitensprungs zu verwenden, müssen Sie das onclick-Attribut im

-Tag hinzufügen und dann JavaScript-Code in den Attributwert schreiben, um den Seitensprung zu implementieren. Die grundlegende Syntax lautet wie folgt:

Jump-Seite

Unter diesen ist window.location.href Teil von JavaScript-Code, der die URL-Adresse der Sprungseite angibt.

2. HTML Button-Seitensprung-Beispielcode

Das Folgende ist ein Beispielcode für HTML Button zum Implementieren des Seitensprungs:

<title>HTML Button跳转页面</title>

<button onclick="window.location.href=&#39;https://www.baidu.com/&#39;">前往百度</button>

Wenn im obigen Code auf die Schaltfläche „Gehe zu Baidu“ geklickt wird, wird zur offiziellen Website von Baidu gesprungen.

3. HTML-Schaltfläche springt zur relativen Pfadseite

In der tatsächlichen Entwicklung ist es oft notwendig, zu anderen Seiten innerhalb derselben Website zu springen. In diesem Fall können relative Pfade anstelle vollständiger URL-Adressen verwendet werden. Der Beispielcode lautet wie folgt:

<title>HTML Button跳转页面</title>

<button onclick="window.location.href=&#39;about.html&#39;">关于我们</button>

Wenn Sie im obigen Code auf die Schaltfläche „Über uns“ klicken, wird zur Seite „about.html“ im selben Verzeichnis gesprungen.

4. Verwenden Sie JavaScript, um den HTML-Schaltflächensprung zu implementieren.

Zusätzlich zum direkten Schreiben von JavaScript-Code in das onclick-Attribut, um den Seitensprung zu implementieren, können Sie den Seitensprung auch über eine Funktion implementieren. Der Beispielcode lautet wie folgt:

<title>HTML Button跳转页面</title>

<button onclick="goToPage()">跳转页面</button>
<script type="text/javascript">
    function goToPage() {
        window.location.href = "https://www.baidu.com/";
    }
</script>

Wenn im obigen Code auf die Schaltfläche „Zur Seite springen“ geklickt wird, wird eine Funktion namens goToPage aufgerufen und der Seitensprung wird innerhalb der Funktion implementiert.

5. HTML Button implementiert Zurück- und Aktualisierungsvorgänge

Zusätzlich zum Springen zu anderen Seiten kann HTML Button auch Zurück- und Aktualisierungsvorgänge implementieren. Der Beispielcode lautet wie folgt:

<title>HTML Button跳转页面</title>

<button onclick="window.history.back()">返回</button>
<button onclick="window.location.reload()">刷新</button>

Wenn Sie im obigen Code auf die Schaltfläche „Zurück“ klicken, kehren Sie zur vorherigen Seite zurück, und wenn Sie auf die Schaltfläche „Aktualisieren“ klicken, wird die aktuelle Seite aktualisiert.

Kurz gesagt ist der HTML-Button eines der wichtigen Elemente, um Seitensprünge, Seitenrücksprünge, Aktualisierungen und andere Funktionen zu realisieren. Durch die Beherrschung der grundlegenden Syntax und der damit verbundenen Kenntnisse von HTML Button können Sie verschiedene Vorgänge problemlos implementieren und praktische Tools für die Webentwicklung bereitstellen.

Das obige ist der detaillierte Inhalt vonAn einem Beispiel wird erläutert, wie Sie mit HTML durch Klicken auf das Button-Element zur Seite springen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!