Wat is href= # en waarom wordt het gebruikt?

Op veel websites zie ik links met href="#". Wat betekent het? Waar wordt het voor gebruikt?


Antwoord 1, autoriteit 100%

Over hyperlinks:

Het belangrijkste gebruik van ankertags – <a></a>– is als hyperlinks. Dat betekent in feite dat ze je ergens naartoe brengen. Hyperlinks vereisen de eigenschap href, omdat deze een locatie specificeert.

Hash:

Een hash – #binnen een hyperlink specificeert een html-element-ID waarnaar het venster moet worden gescrolld.

href="#some-id"zou naar een element op de huidige pagina scrollen, zoals <div id="some-id">.

href="//site.com/#some-id"zou naar site.comgaan en naar de id op die pagina scrollen.

Scroll naar boven:

href="#"specificeert geen ID-naam, maar heeft wel een bijbehorende locatie – bovenaan de pagina. Als u op een anker klikt met href="#", wordt de schuifpositie naar boven verplaatst.

Bekijk deze demo.

Dit is het verwachte gedrag volgens de w3-documentatie.

Hyperlink-plaatsaanduidingen:

Een voorbeeld waar een tijdelijke aanduiding voor een hyperlink zinvol is, is in sjabloonvoorbeelden. Bij demo’s van één pagina voor sjablonen heb ik vaak <a href="#">gezien, zodat de ankertag een hyperlink is, maar nergens heen gaat. Waarom laat u de eigenschap hrefniet leeg? Een lege hrefeigenschap is eigenlijk een hyperlink naar de huidige pagina. Met andere woorden, het zal een paginavernieuwing veroorzaken. Zoals ik heb besproken, is href="#"ook een hyperlink en veroorzaakt scrollen. Daarom is de beste oplossing voor tijdelijke aanduidingen voor hyperlinks href="#!". Het idee hier is dat er hopelijk geen element op de pagina staat met id="!"(wie doet dat!?) en de hyperlink verwijst dus naar niets – er gebeurt dus niets.

Over ankertags:

Een andere vraag die je je misschien afvraagt, is: “Waarom laat je de href-property niet gewoon uit?”. Een veelvoorkomend antwoord dat ik heb gehoord, is dat de eigenschap hrefvereist is, dus het “zou” aanwezig moeten zijn op ankers. Dit is fout! De eigenschap hrefis alleen vereist om een ​​anker daadwerkelijk een hyperlink te laten zijn! Lees dit van w3. Dus waarom niet gewoon weglaten voor tijdelijke aanduidingen? Browsers geven standaardstijlen weer voor elementen en veranderen de standaardstijl van een ankertag die de eigenschap href niet heeft. In plaats daarvan wordt het beschouwd als gewone tekst. Het verandert zelfs het gedrag van de browser met betrekking tot het element. De statusbalk (onderaan het scherm) wordt niet weergegeven wanneer u op een anker zweeft zonder de eigenschap href. Het is het beste om een ​​plaatsaanduiding href-waarde op een anker te gebruiken om ervoor te zorgen dat het als een hyperlink wordt behandeld.

Bekijk deze demodie stijl- en gedragsverschillen laat zien.


Antwoord 2, autoriteit 23%

Als je het “#”-symbool als de href voor iets plaatst, betekent dit dat het niet naar een andere URL verwijst, maar naar een andere ID of naamtag op dezelfde pagina. Bijvoorbeeld:

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

Als er echter geen ID of naam is, gaat het “niet waar.”

Hier is nog een soortgelijke vraag gesteld HTML-ankers met ‘name’ of ‘id’?


Antwoord 3, autoriteit 9%

Helaas wordt <a href="#">het meest gebruikt door luie programmeurs die klikbare niet-hyperlink javascript-gecodeerde elementen willen die zich als ankers gedragen, maar dat kunnen ze’ het is niet nodig om cursor: pointer;of :hoverstijlen toe te voegen aan een klasse voor hun niet-hyperlink-elementen, en bovendien te lui zijn om hrefnaar javascript:void(0);.

Het probleem hiermee is dat de ene <a href="#" onclick="some_function();">of de andere onvermijdelijk eindigt met een javascript-fout, en een anker met een onclick javascript-fout eindigt altijd na de href. Normaal gesproken leidt dit tot een vervelende sprong naar de bovenkant van de pagina, maar in het geval van sites die <base>gebruiken, <a href="#">wordt behandeld als <a href="[base href]/#">, wat resulteert in een onverwachte navigatie. Alslogbare fouten worden gegenereerd, ziet u deze in het laatste geval niet, tenzij u permanente logbestanden inschakelt.

Als een ankerelement wordtgebruikt als een niet-anker, moetzijn hrefzijn ingesteld op javascript:void(0);omwille van sierlijkedegradatie.

Ik heb net twee dagen verspild met het opsporen van fouten in een willekeurige onverwachte paginaomleiding die de pagina gewoon had moeten verversen, en heb het uiteindelijk opgespoord tot een functie die de klikgebeurtenis van een <a href="#">. Vervanging van de #door javascript:void(0);loste het op.

Het eerste wat ik maandag doe, is het project opschonen van alle instanties van <a href="#">.


Antwoord 4, autoriteit 8%

Het is een link die in wezen naar nergens verwijst (het voegt gewoon “#” toe aan de URL). Het wordt om een ​​aantal verschillende redenen gebruikt. Als u bijvoorbeeld een soort JavaScript/jQuery gebruikt en niet wilt dat de daadwerkelijke HTML ergens naar linkt.

Het wordt ook gebruikt voor pagina-ankers, die worden gebruikt om door te verwijzen naar een ander deel van de pagina.


Antwoord 5, autoriteit 6%

Ongeordende lijsten worden vaak gemaakt met de bedoeling ze als menu te gebruiken, maar een lilijstitem is tekst. Omdat het lijst liitem tekst is, zal de muisaanwijzer geen pijl zijn, maar een “I-cursor”. Gebruikers zijn gewend om een ​​wijzende vinger voor een muisaanwijzer te zien wanneer iets klikbaar is. Als u een ankertag abinnen de li-tag gebruikt, verandert de muisaanwijzer in een wijzende vinger. De wijzende vinger is veel beter om de lijst als menu te gebruiken.

<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>

Als de lijst wordt gebruikt voor een menu en geen link nodig heeft, hoeft er geen URL te worden aangewezen. Maar het probleem is dat als u het kenmerk hrefweglaat, tekst in de tag <a>wordt gezien als tekst en dat de muisaanwijzer daarom teruggaat naar een I -cursor. De I-cursor kan de gebruiker doen denken dat het menu-item niet aanklikbaar is. Daarom heb je nog steeds een hrefnodig, maar je hebt nergens een link naar nodig.

Je zou veel divof ptags kunnen gebruiken voor een menulijst, maar de muisaanwijzer zou er ook een I-cursor voor zijn.

Je zou veel op elkaar gestapelde knoppen kunnen gebruiken voor een menulijst, maar de lijst lijkt de voorkeur te hebben. En dat is waarschijnlijk de reden waarom de href="#"die nergens naar verwijst, wordt gebruikt in ankertags binnen lijsttags.

Je kunt de aanwijzerstijl in CSS instellen, dus dat is een andere optie. De href="#"naar nergens is misschien gewoon de luie manier om wat styling in te stellen.


Antwoord 6, autoriteit 4%

Het probleem met het gebruik van href=”#” voor een lege link is dat het je naar de bovenkant van de pagina brengt, wat misschien niet de gewenste actie is.
Om dit te voorkomen, gebruikt u voor oudere browsers of niet-HTML5-doctypes

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

Antwoord 7, autoriteit 3%

Voor zover ik weet is het meestal een tijdelijke aanduiding voor links waaraan JavaScript is gekoppeld. Het belangrijkste punt van de link wordt bediend door de JavaScript-code uit te voeren; browsers met JS-ondersteuning negeren dan het echte linkdoel. Als de browser JS niet ondersteunt, verandert het hekje de link in wezen in een no-op. Zie ook onopvallend JavaScript.


Antwoord 8, autoriteit 3%

Zoals sommige van de andere antwoorden hebben aangegeven, vereist het a-element een href-attribuut en wordt het #gebruikt als een tijdelijke aanduiding, maar het is ook een historisch artefact.

Van Mozilla Developer Network:

href

Dit was het enige vereiste attribuut voor ankers die a . definieerden
hypertext-bronlink, maar is niet langer vereist in HTML5. weglaten
dit attribuut creëert een tijdelijke aanduiding-link. Het href-kenmerk
geeft het linkdoel aan, ofwel een URL of een URL-fragment. Een URL
fragment is een naam voorafgegaan door een hekje (#), dat een specificeert
interne doellocatie (een ID) binnen het huidige document.

Ook volgens de HTML5 spec:

Als het a-element geen href-attribuut heeft, dan vertegenwoordigt het element a
tijdelijke aanduiding voor waar een link anders zou zijn geplaatst, als het
relevant was, bestaande uit alleen de inhoud van het element.


Antwoord 9, autoriteit 2%

Het href-attribuut definieert de URL van de bron van een link. Als de ankertag geen href-tag heeft, wordt het geen hyperlink. Het href-kenmerk heeft de volgende waarden:

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>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

15 + 18 =

Other episodes