Heim > Web-Frontend > HTML-Tutorial > Ausführliche Erklärung zur Verwendung von onclick und href im a-Tag in HTML

Ausführliche Erklärung zur Verwendung von onclick und href im a-Tag in HTML

高洛峰
Freigeben: 2017-03-20 16:59:53
Original
2933 Leute haben es durchsucht

onclick

Das Onclick-Ereignis des Links wird zuerst ausgeführt, gefolgt von der Aktion unter dem href--Attribut (Seitensprung oder Javascript-Pseudolink);
Angenommen, href existiert auch im Link Wenn Sie möchten, dass bei onclick die Aktion unter dem href-Attribut nicht ausgeführt wird, muss onclick einen falschen Rückgabewert erhalten. Wenn Sie es nicht glauben, können Sie die return false in der goGoogle -Funktion auskommentieren; Wenn die Seite zu lang ist und eine Bildlaufleiste hat, und Sie möchten das Onclick-Ereignis des Links „Aktionen ausführen“ übergeben. Sein href-Attribut sollte auf javascript:void(0); anstelle von # gesetzt werden, was unnötige Seitensprünge verhindern kann.
Wenn eine Funktion mit einem
-Rückgabewert im href-Attribut des Links aufgerufen wird , der Inhalt der aktuellen Seite wird durch den Rückgabewert dieser -Funktion ersetzt, der bei gedrückter Umschalttaste unterschiedlich ist. Das Problem, auf das ich heute gestoßen bin, ist, dass ich in IE6.0 nicht auf parentNode in Form von href zugreifen kann.
Versuchen Sie, das Javascript:-Protokoll nicht als href-Attribut von A zu verwenden. Dies führt nicht nur zu einer unnötigen Auslösung des window.onbeforeunload-Ereignisses, sondern führt auch zu einer GIF
Animation
Bild IE. Hören Sie auf zu spielen Folgendes ist mir aufgefallen: Wenn das href-Attribut nicht gesetzt ist, reagiert IE6 nicht auf Hover. Nach einem Doppelklick wird der übergeordnete Container des Labels anstelle des Labels a ausgewählt (dieses Problem besteht unter IE).
Angenommen, wir haben eine fn-Methode und müssen dieses Element abrufen, die erste Methode wird übergeben Dies ist ein Nullwert.
Die empfohlene Schreibweise ist also

Der folgende Code führt die Funktion subgo() aus,
< ;a href="javascript:void(0)" onclick="subgo()">Click me
Hier hat javascript:void(0) keine tatsächliche Wirkung, es ist nur eine toter Link, und die ausgeführte Funktion ist subgo().
Klick michKlick michUnterschied.
Tatsächlich enthält #eine Standortinformation. Der Standardanker ist #
top
, der sich oben auf der Webseite befindet, während javascript:void(0) nur einen toten Link ohne jegliche Informationen darstellt. Daher ist es am besten, beim Aufrufen eines Skripts void(0)
zu verwenden. href zeigt im Allgemeinen auf eine URL-Adresse. Sie können auch Javascript aufrufen, z. B. href="javascript:xxx();", das Dokument empfiehlt das Schreiben wie folgt Dies: xx, aber diese Methode erzeugt manchmal seltsame Ergebnisse in komplexen Umgebungen Versuchen Sie im Hinblick auf das Problem, das javascript:-Protokoll nicht als href-Attribut von A zu verwenden. Dies führt nicht nur dazu, dass das window.onbeforeunload-Ereignis unnötigerweise ausgelöst wird, sondern führt auch dazu, dass die Wiedergabe des animierten GIF-Bilds gestoppt wird im IE. Wir wissen, dass das Onclick-Ereignis des Links zuerst ausgeführt wird, gefolgt von der Aktion unter dem href-Attribut (Seitensprung oder Javascript-Pseudolink). Wenn Sie die Aktion unter dem href-Attribut nicht ausführen möchten, ist onclick erforderlich Dies ist im Allgemeinen der Fall. Schreiben Sie onclick="xxx();return false;". Da onclick nicht FALSE zurückgibt, führt dies zu href Ausführungs- und Seitendarstellungsprobleme. Die Lösung besteht darin, den folgenden Code mithilfe von TAB in die JSP zu kopieren. --------------------------------- --- -------------------------------- --- -------------------------
Was sonst noch Fans sagten: „In IE8 werden beispielsweise „javascript:;“, „javascript:void(0)“, „javascript:void(
null
)“ alle abgelehnt], weil es keine
Installation gibt
IE8, keine voreiligen Schlüsse wagen. --------------------------------- --- -------------------------------- --- ------------------------------------- Wenn es in der tatsächlichen Anwendung zutrifft Das -Tag wird verwendet, um auf das onclick-Ereignis zu reagieren. Dann empfiehlt es sich, die folgenden drei Methoden zu verwenden 1.test < a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();return false">test3.test -------------------------------------------------- -----------------------------------------------
Hyperlink< Die Markierung ;a> stellt einen Linkpunkt dar und ist die Abkürzung für Englisch Anchor (
Ankerpunkt). Seine Funktion besteht darin, den Text oder die Bilder an der aktuellen Position mit anderen Seiten, Texten oder Bildern zu verbinden. Die grammatikalische Struktur ist jedoch möglicherweise etwas unbekannt, und um sie effektiv nutzen zu können, müssen Sie ihre grammatikalische Struktur verstehen. Die grundlegende Syntaxstruktur des -Tags ist: class=type
id=value
href=reference
name=value
rel=same|
next
|parent|previous rev=value
target=window
style=value
title=title
onclick=function

onmouseout=function
onMouseOver=function>Connect Wie aus der Syntaxstruktur des Tags ersichtlich ist, müssen viele Parameter festgelegt werden Einen Hyperlink setzen Es gibt Optionen, um verschiedene Linkeffekte zu erzielen, was etwas unerwartet ist, oder? !
 Die Optionen
class und id: werden verwendet, um den Typ des Verbindungspunkts und die zugewiesene ID-Nummer festzulegen, die normalerweise nicht festgelegt werden. Die beiden am häufigsten verwendeten Parameter sind href und name. href ist die Abkürzung für Hypertext-Referenz, die zum Festlegen der Linkadresse verwendet wird. Die Linkadresse muss eine URL-Adresse sein. Wenn kein spezifischer Pfad angegeben wird, ist der Standardpfad derselbe wie der Pfad der aktuellen Seite. Die verlinkten Dateien sind ebenfalls in mehrere Situationen unterteilt: Wenn es sich um eine HTML-Datei handelt, wird sie direkt im aktuellen Browser geöffnet. Wenn es sich um eine ausführbare Datei (.exe-Datei) handelt, wird sie direkt ausgeführt oder heruntergeladen Die von uns zum Download bereitgestellte Funktion wird genutzt; wenn es sich um eine Textdatei, beispielsweise eine Word-Formatdatei, handelt, kann die Datei im Browser geöffnet und bearbeitet und verarbeitet werden. rel: Zeigt das Festlegen der Verknüpfungsbeziehung an: rel=same bedeutet, dass die zu verknüpfende Datei mit dieser Datei identisch ist, rel=next bedeutet, dass die zu verknüpfende Datei die nächste Seite ist, rel=parent bedeutet, dass diese Datei ist die übergeordnete Datei der zu verknüpfenden Datei. rel= previous bedeutet, dass die zu verknüpfende Datei die vorherige Seite ist.
rev: wird zum Setzen von Reverse-Links verwendet.
Ziel: Legt fest, zu welchem ​​Fenster eine Verknüpfung hergestellt werden soll, wenn ein Rahmenfenster verwendet wird. Ziel = „_bank“ bedeutet das Öffnen eines neuen Fensters zum Öffnen der Webseite.
Titel: Wird verwendet, um den Titel festzulegen, der angezeigt wird, wenn der Linkpunkt ausgewählt wird.
 onclick: Entspricht einem Ereignis, wenn auf den Linkpunkt geklickt wird, wird dieses Ereignis ausgelöst und die entsprechende Unterroutine ausgeführt.
Onmouseover: Ähnlich wie bei onclick wird das entsprechende Ereignis ausgelöst, wenn die Maus über den Linkpunkt bewegt wird.
onmouseout: Das entsprechende Ereignis wird ausgelöst, nachdem sich die Maus aus dem Stadtkontakt bewegt.
Ein paar Beispiele:
Zurück zur Startseite ="http://blog.163.com/wb_zhaoyuwei/blog/sound.wav">Sprachdatei abspielen blog/javascipt.open()">Das entsprechende Programm ausführen
Das entsprechende Dokument zur Bearbeitung öffnen< ;/a>
Anwendungskompetenzen
1. Download-Dateien bereitstellen Viele Internetnutzer haben geschrieben, um zu fragen, wie der Download-Effekt bereitgestellt werden kann. Tatsächlich handelt es sich immer noch um einen Hyperlink, die herunterzuladende Datei muss jedoch auf die Website hochgeladen werden. Beispiel: Es gibt ein Dateipaket „Webseiten-Skills“ zum Herunterladen. Der Dateiname lautet „homepagejq.zip“ und wurde auf die Website hochgeladen. Der Code für diesen Link kann wie folgt geschrieben werden: Klicken Sie hier, um das Dateipaket „Web Page Skills" herunterzuladen.
2. Öffnen Sie die verlinkte Webseite in einem neuen Fenster
Setzen Sie den Wert von „target“ auf „_blank“. Beispiel: Öffnen Sie die Webseite „aboutme.htm“ in einem neuen Fenster. Der Code, der diesen Effekt erzeugt, ist: Über mich... 3. Bewegen Sie die Maus auf den Link und zeigen Sie eine Zeile mit Beschreibungstext an.
Legen Sie den Parameterwert „Titel“ fest, um diesen Effekt zu erzielen. Beispiel: Wenn die Maus über den Link „Huangshan Villager“ bewegt wird, wird die Beschreibung „Dies ist eine professionelle Website, die Fähigkeiten in der Webseitenerstellung vermittelt“ angezeigt. Der Code dieses Links lautet wie folgt:
Huangshan Dorfmann.
4. Bewegen Sie die Maus über einen Link und ein Fenster wird geöffnet.
Dies ist der Effekt, der durch Festlegen des Parameters onmouseover erzielt wird. Beispiel: Wenn die Maus über einen Link bewegt wird, öffnet sich ein Fenster und zeigt im Fenster „Mouse-Hover-Effekt-Demonstration!“ an. Der Code dieses Links lautet wie folgt: . Eine ähnliche Methode kann verwendet werden, um den Effekt zu erzeugen, dass beim Drücken der Maus ein Eingabeaufforderungsfenster erscheint und beim Verlassen der Maustaste ein Eingabeaufforderungsfenster angezeigt wird.
5. Link zum angegebenen Inhalt dieser Seite
Um auf einen bestimmten Teil des Inhalts dieser Seite zu verlinken (also „innerhalb der Datei zu springen“), müssen Sie den Parameter name verwenden, um den Namen anzugeben des Verbindungspunkts. Wählen Sie einen Text aus und verwenden Sie den Namensparameter, um ihn für die Verwendung in Links zu benennen. Der sogenannte Sprung innerhalb derselben Datei bedeutet, dass der Leser beim Lesen einer sehr langen Datei, wenn er nur an einem bestimmten Teil des Inhalts interessiert ist, eine springende Lesemethode verwenden kann. Das Grundformat ist:
Teil 2Der Inhalt des ersten Teils...
......... .. ................................
< ;/ a>Der eigentliche Inhalt des zweiten Teils......
........................ ........ ...
Auf diese Weise werden Sie beim Klicken auf den Hyperlink „Teil 2“ automatisch zum „Eigentlichen Inhalt von Teil 2“ weitergeleitet. Der durch den Parameter „name“ definierte Linkpunktname kann beliebig gewählt werden, der Linkpunktname im „href“-Parameter des Links muss jedoch damit übereinstimmen. Vergessen Sie nicht, davor „#“ hinzuzufügen.
6. Link zum angegebenen Inhaltsort anderer Seiten
Die Methode ähnelt dem obigen Beispiel, jedoch muss der Dateiname der Webseite vor dem Linkpunktnamen im Parameter „href“ hinzugefügt werden. Beispiel: Es gibt zwei Webseiten, Seite1.htm und Seite2.htm. Jetzt möchten wir einen Hyperlink in Seite1.htm erstellen page2.htm. Dann können wir dies tun, indem wir zunächst diesen Code am Anfang des zweiten Teils von page2.htm schreiben:
; Der zweite Teil von Seite2.
7. Link zur E-Mail
Nachdem Sie auf einen Hyperlink geklickt haben, wird die E-Mail-Verwaltungssoftware auf dem Client-Computer gestartet, um Ihnen einen Brief zu schreiben. Zum Beispiel diese Codezeile: Bitte schreiben Sie mir. Sobald Sie auf den Link „Bitte schreiben Sie mir“ klicken, wird die Schreibfunktion der E-Mail-Verwaltungssoftware (z. B. OE) automatisch gestartet und die E-Mail-Adresse zur Adressleiste des Empfängers hinzugefügt.
Links können nicht nur Text als Träger verwenden, sondern auch Bilder als Träger und können auch einen bestimmten Teil des Bildes als Träger verwenden und die oben genannten Effekte erzielen Der Unterschied liegt im Träger, also im Link. Der Teil zwischen den beiden eckigen Klammern, daher werde ich kein weiteres Beispiel nennen.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von onclick und href im a-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage