Was ist href = "#" und warum wird es verwendet?

363

Auf vielen Websites sehe ich Links, die haben href="#". Was bedeutet das? Was wird es verwendet?

html hyperlink

— Samir Ghobril
quelle

345

Über Hyperlinks:

Die Hauptverwendung von Ankertags - <a></a>- sind Hyperlinks . Das bedeutet im Grunde, dass sie dich irgendwohin bringen. Hyperlinks erfordern die hrefEigenschaft, da sie einen Speicherort angibt.

Hash:

Ein Hash - # innerhalb eines Hyperlinks gibt eine HTML-Element-ID an, zu der das Fenster gescrollt werden soll.

href="#some-id"würde zu einem Element auf der aktuellen Seite scrollen, wie z <div id="some-id">.

href="https://stackoverflow.com//site.com/#some-id"würde zu gehen site.comund zu der ID auf dieser Seite scrollen.

Nach oben scrollen:

href="#"gibt keinen ID-Namen an, hat aber einen entsprechenden Speicherort - den oberen Rand der Seite. Durch Klicken auf einen Anker mit href="#"wird die Bildlaufposition nach oben verschoben.

Siehe diese Demo.

Dies ist das erwartete Verhalten gemäß der w3-Dokumentation.

Hyperlink-Platzhalter:

Ein Beispiel, bei dem ein Hyperlink-Platzhalter sinnvoll ist, ist die Vorlagenvorschau. Bei einseitigen Demos für Vorlagen habe ich oft gesehen <a href="#">, dass das Ankertag ein Hyperlink ist, aber nirgendwo hingeht. Warum nicht die hrefImmobilie leer lassen? Eine leere hrefEigenschaft ist eigentlich ein Hyperlink zur aktuellen Seite. Mit anderen Worten, es wird eine Seitenaktualisierung verursacht. Wie ich bereits erwähnt habe, href="#"handelt es sich auch um einen Hyperlink, der zum Scrollen führt. Daher ist die beste Lösung für Hyperlink-Platzhalter tatsächlich href="#!"die Idee hier ist, dass es hoffentlich kein Element auf der Seite mit id="!"(wer macht das!?) Gibt und der Hyperlink daher auf nichts verweist - also passiert nichts.

Über Ankertags:

Eine andere Frage, die Sie sich vielleicht fragen, lautet: "Warum nicht einfach die href-Eigenschaft weglassen?". Eine häufige Antwort, die ich gehört habe, ist, dass die hrefEigenschaft erforderlich ist, so dass sie auf Ankern "vorhanden" sein sollte. Das ist falsch! Die hrefEigenschaft wird nur benötigt, damit ein Anker tatsächlich ein Hyperlink ist! Lesen Sie dies aus w3 . Warum also nicht einfach für Platzhalter weglassen? Browser rendern Standardstile für Elemente und ändern den Standardstil eines Ankertags ohne die Eigenschaft href. Stattdessen wird es als normaler Text betrachtet. Es ändert sogar das Verhalten des Browsers in Bezug auf das Element. Die Statusleiste (unten auf dem Bildschirm) wird nicht angezeigt, wenn Sie den Mauszeiger ohne die Eigenschaft href auf einem Anker halten.

In dieser Demo werden Stil- und Verhaltensunterschiede demonstriert.

— m59
quelle

1

Vollständige Antwort. Aber was bedeutet die Vorschau von Begriffsvorlagen in Ihrer Antwort?

— Überaustausch

3

@overexchange Siehe zum Beispiel diese Seite und die darauf enthaltenen Links: ironsummitmedia.github.io/startbootstrap-creative Nur HTML-Seiten, die eine Reihe von CSS / HTML-, WordPress-Themen usw. demonstrieren sollen, aber keine echten Seiten sind. Die Links müssen also nirgendwo hingehen.

— m59

1

@Yeung Durch Ändern des Hashs (das ist der Teil der URL nach dem #) wird der Server nicht aufgerufen. Sie würden die Seite mit Javascript ändern. Zu diesem Thema gibt es viel zu sagen und es geht über den Rahmen dieses Beitrags hinaus.

— M59

2

Außerdem akzeptieren zufällige Leckerbissen, Android-Browser (Browser, Chrome usw.) keine Klickereignisse für etwas anderes als Ankertags. Angenommen, Sie möchten die .click()Methode von jQuery für a verwenden <div></div>, sie funktioniert nicht. Entweder muss es auf einem Anker sein oder Sie müssen touchEreignisse verwenden.

— Steely

1

@QHarr Ich bin nicht positiv, aber es sollte sein, dass ein leeres "#" sich auf nichts bezieht. Es ist also dasselbe wie das Weglassen, und das Weglassen würde sich nur auf die Seite beziehen, und die Seiten beginnen am oben, sofern nicht anders angegeben. Mit anderen Worten, vielleicht bedeutet es nicht "nach oben scrollen", sondern nur nichts, dh "zu dieser Seite gehen", was zufällig bedeutet, nach oben zu gehen.

— m59

85

Wenn Sie das Symbol "#" als href für etwas verwenden, verweist es nicht auf eine andere URL, sondern auf eine andere ID oder ein anderes Namensschild auf derselben Seite. Zum Beispiel:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

Wenn es jedoch keine ID oder keinen Namen gibt, wird "no where" angezeigt.

Hier ist eine andere ähnliche Frage, die HTML-Ankern mit 'Name' oder 'ID' gestellt wird.

— KJYe.Name 葉家仁
quelle

1

Ein Element mit der ID - es muss kein benannter Anker sein (und tatsächlich sind benannte Anker seit einiger Zeit veraltet).

— Oded

2

Ich bin hierher gekommen, weil ich <a href="#">...</a>nicht "nirgendwo hingehen" wollte, sondern die Seite verlassen und geladen habe site.com/#. Wie ist das möglich?

— Doug65536

7

@ doug65536 Dies liegt höchstwahrscheinlich daran, dass ein onclickEreignishandler an dieses Element gebunden war und eine Javascript-Funktion aufgerufen wurde, die Sie auf diese Seite umleitete.

— jtate

32

Es ist ein Link, der im Wesentlichen auf nichts verweist (er fügt der URL nur "#" hinzu). Es wird aus verschiedenen Gründen verwendet. Zum Beispiel, wenn Sie eine Art JavaScript / jQuery verwenden und nicht möchten, dass der tatsächliche HTML-Code irgendwo verlinkt wird.

Es wird auch für Seitenanker verwendet, mit denen zu einem anderen Teil der Seite umgeleitet wird.

— Tyler Treat
quelle

40

Nur um es hinzuzufügen, es ist nicht gerade ein Link ins Nirgendwo ... auf einer Bildlaufseite werden Sie automatisch nach oben gescrollt.

— Misko

26

Leider wird dies am häufigsten <a href="#">von faulen Programmierern verwendet, die anklickbare, nicht mit Hyperlink verknüpfte Javascript-codierte Elemente wünschen, die sich wie Anker verhalten, aber nicht dazu gebracht werden können , einer Klasse für ihre Nicht-Hyperlink-Elemente cursor: pointer;oder :hoverStile hinzuzufügen , und dies zusätzlich sind zu faul , um eingestellt hrefzu javascript:void(0);.

Das Problem dabei ist, dass der eine <a href="#" onclick="some_function();">oder andere unweigerlich mit einem Javascript-Fehler endet und ein Anker mit einem On-Click-Javascript-Fehler immer seinem folgt href. Normalerweise ist dies ein nerviger Sprung an den Anfang der Seite, aber bei Websites, die verwendet werden <base>, <a href="#">wird dies als behandelt <a href="[base href]/#">, was zu einer unerwarteten Navigation führt. Wenn protokollierbare Fehler generiert werden, werden diese im letzteren Fall nur angezeigt, wenn Sie persistente Protokolle aktivieren.

Wenn ein Ankerelement ist als Nicht-Anker verwendet es sollte seine haben hrefSatz javascript:void(0);aus Gründen der anmutigen Abbau.

Ich habe gerade zwei Tage damit verbracht, eine zufällige unerwartete Seitenumleitung zu debuggen, die die Seite einfach hätte aktualisieren sollen, und sie schließlich auf eine Funktion zurückgeführt, die das Klickereignis eines auslöst <a href="#">. Ersetzen der #mitjavascript:void(0); behoben.

Das erste, was ich am Montag mache, ist das Löschen des Projekts aller Instanzen von <a href="#">.

— Aufgeschissener Kunde
quelle

4

"Wenn ein Ankerelement als Nichtanker verwendet wird, sollte seine href auf Javascript gesetzt sein: void (0); aus Gründen einer angemessenen Verschlechterung." [Zitat benötigt]

— Vito De Tullio

Y, mit und ohne machen das <base>wirklich einen großen Unterschied für die #. Vielen Dank für den Hinweis!

— LeOn - Han Li

Ich habe gerade zwei Tage damit verbracht, eine zufällige unerwartete Seitenumleitung zu debuggen, die die Seite einfach hätte aktualisieren sollen, und sie schließlich auf eine Funktion zurückgeführt, die das Klickereignis eines <a href="#"> auslöst. Ersetzen des # durch Javascript: void (0); repariert. - Ich habe das Gleiche getan und auch mein Problem gelöst.

— Liang

23

Ungeordnete Listen werden häufig mit der Absicht erstellt, sie als Menü zu verwenden, ein liListenelement ist jedoch Text. Da es sich bei dem Listenelement lium Text handelt, ist der Mauszeiger kein Pfeil, sondern ein "I-Cursor". Benutzer sind es gewohnt, einen Zeigefinger für einen Mauszeiger zu sehen, wenn etwas anklickbar ist. Wenn Sie ein Ankertag ainnerhalb des liTags verwenden, ändert sich der Mauszeiger in einen Zeigefinger. Der Zeigefinger ist viel besser, um die Liste als Menü zu verwenden.

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

Wenn die Liste für ein Menü verwendet wird und keinen Link benötigt, muss keine URL angegeben werden. Das Problem ist jedoch, dass, wenn Sie das hrefAttribut weglassen, der Text im <a>Tag als Text angesehen wird und der Mauszeiger daher wieder auf einen I-Cursor zeigt. Der I-Cursor lässt den Benutzer möglicherweise denken, dass der Menüpunkt nicht anklickbar ist. Deshalb brauchst du noch einehref , aber Sie benötigen keinen Link zu irgendwo.

Sie könnten viele divoder verwendenp Tags für eine Menüliste verwenden, aber der Mauszeiger wäre auch ein I-Cursor für sie.

Sie könnten viele übereinander gestapelte Schaltflächen für eine Menüliste verwenden, aber die Liste scheint vorzuziehen zu sein. Und das ist wahrscheinlich der Grundhref="#" , , was auf nichts zeigt, in Ankertags innerhalb von Listen-Tags verwendet wird.

Sie können den Zeigerstil in CSS festlegen, sodass dies eine weitere Option ist. Das href="#"Nirgendwo könnte nur die faule Art sein, etwas Styling festzulegen.

— Alan Wells
quelle

14

Das Problem bei der Verwendung von href = "#" für einen leeren Link besteht darin, dass Sie zum oberen Rand der Seite gelangen, was möglicherweise nicht die gewünschte Aktion ist. Um dies zu vermeiden, verwenden Sie für ältere Browser oder Nicht-HTML5-Doctypes

<a href="javascript:void(0)">Goes Nowhere</a>

— RationalRabbit
quelle

2

Ich fand diese Lösung besonders nützlich für ein Szenario: In meiner Anwendung wird href = '"" verwendet, um die Abmeldefunktion (zur Anmeldeseite bringen) zu implementieren. Wenn ich das href = "#" für einen anderen Zweck verwende, werde ich irgendwann zur Anmeldeseite zurückkehren. Nachdem ich href = "#" in href = "javascript: void (0)" geändert habe, wurde das Problem behoben.

— Liang

13

Soweit ich weiß, ist es normalerweise ein Platzhalter für Links, an die JavaScript angehängt ist. Der Hauptpunkt des Links wird durch Ausführen des JavaScript-Codes bedient. Browser mit JS-Unterstützung ignorieren dann das eigentliche Linkziel. Wenn der Browser JS nicht unterstützt, verwandelt das Hash-Zeichen den Link im Wesentlichen in ein No-Op. Siehe auch unauffälliges JavaScript .

— Zoul
quelle

13

Wie einige der anderen Antworten gezeigt haben, abenötigt das Element ein hrefAttribut und das# wird als Platzhalter verwendet, es ist jedoch auch ein historisches Artefakt.

Aus dem Mozilla Developer Network :

href

Dies war das einzige erforderliche Attribut für Anker, die einen Hypertext-Quelllink definieren, wird jedoch in HTML5 nicht mehr benötigt. Durch Weglassen dieses Attributs wird ein Platzhalterlink erstellt. Das href-Attribut gibt das Linkziel an, entweder eine URL oder ein URL-Fragment. Ein URL-Fragment ist ein Name, dem ein Rautezeichen (#) vorangestellt ist, das einen internen Zielspeicherort (eine ID) im aktuellen Dokument angibt.

Gemäß der HTML5- Spezifikation :

Wenn das a-Element kein href-Attribut hat, stellt das Element einen Platzhalter dar, für den andernfalls ein Link platziert worden wäre, wenn er relevant gewesen wäre, der nur aus dem Inhalt des Elements besteht.

— Doug Richardson
quelle

1

Das href-Attribut definiert die URL der Ressource eines Links. Wenn das Ankertag kein href-Tag hat, wird es nicht zum Hyperlink. Das href-Attribut hat die folgenden Werte:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>

— Sheo Dayal Singh
quelle