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

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

Ü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://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.

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.

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.

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="#">.

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.

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>

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 .

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.

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>