Drei Möglichkeiten, durch Klicken auf ein Button-Tag in HTML zu einer Seite zu springen

Drei Möglichkeiten, durch Klicken auf ein Button-Tag in HTML zu einer Seite zu springen

Methode 1: Verwenden des Onclick-Ereignisses

<Eingabetyp="Schaltfläche" Wert="Schaltfläche"
beim Klicken = "javascript:window.location.href='http://www.baidu.com/'" />

Oder verwenden Sie den Button-Tag direkt

<button onclick="window.location.href = 'https://www.baidu.com/'">Baidu</button>

Methode 2: Fügen Sie dem Button-Tag ein a-Tag hinzu

<a href="http://www.baidu.com/">
    <Schaltfläche>Baidu</Schaltfläche>
</a>

Oder verwenden Sie

<a href="http://www.baidu.com/"><input type="button" value='Baidu'></a>

Methode 3: Verwenden der JavaScript-Funktion

<Skript>
Funktion Sprung(){
 window.location.href="http://www.baidu.com/";
}
</Skript>
<Eingabetyp = "Schaltfläche" Wert = "Baidu" beim Klicken = javascript:jump() />
// Oder <input type="button" value="Baidu" onclick="jump()" />
// oder <button onclick="jump()">Baidu</button>

Zusammenfassen

Oben sind drei vom Editor eingeführte Methoden, um durch Klicken auf das Button-Tag in HTML einen Seitensprung zu erreichen. Ich hoffe, dass dies für alle hilfreich sein wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<:  Soll die Like-Funktion MySQL oder Redis verwenden?

>>:  Die häufigste Deklarationszusammenführung in TS (Schnittstellenzusammenführung)

Artikel empfehlen

Docker mountet lokale Verzeichnisse und Datenvolumen-Container-Operationen

1. Docker mountet das lokale Verzeichnis Docker k...

Einführung in TypeScript-Schnittstellen

Inhaltsverzeichnis 1. Schnittstellendefinition 2....

Tutorial zu HTML-Tabellen-Tags (13): Regeln für interne Rahmenstilattribute

Mit REGELN kann die Art der inneren Rahmen der Ta...

XHTML-Einführungstutorial: Webseitenkopf und DTD

Obwohl Kopf und DTD nicht auf der Seite angezeigt...

Detaillierte Erklärung zur Verwendung der Vue-Nummernschild-Eingabekomponente

Eine einfache Nummernschild-Eingabekomponente (vu...

Best Practices zum Teilen von React-Code

Wenn ein Projekt eine gewisse Komplexität erreich...

Implementierung der virtuellen React-Liste

Inhaltsverzeichnis 1. Hintergrund 2. Was ist eine...

Zusammenfassung zweier Methoden zum Implementieren der Vue-Druckfunktion

Methode 1: Installieren Sie das Plugin über npm 1...

Eine kurze Diskussion zur Verwendung von React.FC und React.Component

Inhaltsverzeichnis 1. Reagieren.FC<> 2. Kla...