Co to jest href = „#” i dlaczego jest używane?

Na wielu stronach widzę linki, które mają href="#". Co to znaczy? Do czego jest to używane?

Informacje o hiperłączach:

Główne zastosowanie tagów zakotwiczenia - <a></a>- to hiperłącza . To w zasadzie oznacza, że ​​cię gdzieś zabierają. Hiperłącza wymagają tej hrefwłaściwości, ponieważ określa ona lokalizację.

Haszysz:

Hash - #w hiperłączu określa identyfikator elementu HTML, do którego należy przewinąć okno.

href="#some-id"przewinąłby do elementu na bieżącej stronie, takiego jak <div id="some-id">.

href="https://site.com/#some-id"przejdzie do site.comi przewinie do identyfikatora na tej stronie.

Przewiń na górę:

href="#"nie określa nazwy identyfikatora, ale ma odpowiednią lokalizację - górę strony. Kliknięcie kotwicy za pomocą href="#"spowoduje przesunięcie pozycji przewijania na górę.

Zobacz to demo.

Jest to oczekiwane zachowanie zgodnie z dokumentacją w3.

Symbole zastępcze hiperłączy:

Przykład, w którym symbol zastępczy hiperłącza ma sens, znajduje się w podglądzie szablonu. Na pojedynczych stronach demonstracyjnych szablonów często widziałem <a href="#">, że tag kotwicy jest hiperłączem, ale nigdzie nie idzie. Dlaczego nie zostawić hrefnieruchomości pustej? Pusta hrefwłaściwość jest w rzeczywistości hiperłączem do bieżącej strony. Innymi słowy, spowoduje to odświeżenie strony. Jak już wspomniałem, href="#"jest również hiperłączem i powoduje przewijanie. Dlatego najlepszym rozwiązaniem dla symboli zastępczych hiperłączy jest href="#!"tutaj. Pomysł polega na tym, że mam nadzieję, że na stronie nie ma elementu id="!"(kto to robi !?), a zatem hiperlink nie odnosi się do niczego - więc nic się nie dzieje.

Informacje o tagach kotwicy:

Innym pytaniem, które możesz się zastanawiać, jest: „Dlaczego po prostu nie pozostawić własności href?”. Często słyszałem, że hrefwłaściwość jest wymagana, więc „powinna” być obecna na kotwicach. To nieprawda! Ta hrefwłaściwość jest wymagana tylko, aby kotwica faktycznie była hiperłączem! Przeczytaj to z w3. Dlaczego więc nie zostawić tego dla symboli zastępczych? Przeglądarki renderują domyślne style elementów i zmienią domyślny styl znacznika kotwicy, który nie ma właściwości href. Zamiast tego będzie traktowany jak zwykły tekst. Zmienia nawet zachowanie przeglądarki w odniesieniu do elementu. Pasek stanu (dolna część ekranu) nie będzie wyświetlany, gdy zatrzymasz się na kotwicy bez właściwości href. Najlepiej jest użyć zastępczej wartości href na kotwicy, aby upewnić się, że jest traktowana jako hiperłącze.

Zobacz to demo pokazujące różnice w stylu i zachowaniu.

Umieszczenie symbolu „#” jako href dla czegoś oznacza, że ​​wskazuje on nie na inny adres URL, ale na inny identyfikator lub tag na tej samej stronie. Na przykład:

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

Jeśli jednak nie ma identyfikatora ani nazwy, oznacza to „nie gdzie”.

Oto kolejne podobne pytanie zadane Kotwice HTML z „nazwa” lub „id”?

Jest to link, który prowadzi do nikąd (dodaje tylko „#” do adresu URL). Jest używany z wielu różnych powodów. Na przykład, jeśli używasz jakiegoś JavaScript / jQuery i nie chcesz, aby rzeczywisty HTML łączył się gdziekolwiek.

Służy również do zakotwiczeń strony, które służą do przekierowywania do innej części strony.

Niestety, najczęstszym zastosowaniem <a href="#">są leniwi programiści, którzy chcą klikalnych elementów, które nie są hiperłączami, kodowanych w javascript, które zachowują się jak kotwice, ale nie można ich dodawać cursor: pointer;ani dodawać :hoverstylów do klasy dla ich elementów niebędących hiperłączami, i są dodatkowo zbyt leniwy, aby ustawić hrefsię javascript:void(0);.

Problem polega na tym, że jeden <a href="#" onclick="some_function();">lub drugi nieuchronnie kończy się błędem javascript, a kotwica z błędem javascript onclick zawsze kończy się jego błędem href. Zazwyczaj kończy się przykry skok na górze strony, ale w przypadku stron korzystających <base>, <a href="#">jest traktowane jako <a href="[base href]/#">, powodując nieoczekiwane nawigacji. Jeśli generowane są jakiekolwiek błędy logowalne, nie zobaczysz ich w drugim przypadku, chyba że włączysz trwałe dzienniki.

Jeśli element kotwicy zostanie użyty jako element inny niż kotwica, powinien zostać hrefustawiony javascript:void(0);na ze względu na wdzięczną degradację.

Właśnie zmarnowałem dwa dni na debugowanie przypadkowego nieoczekiwanego przekierowania strony, które powinno po prostu odświeżyć stronę, i w końcu wyśledziłem ją do funkcji zwiększającej zdarzenie kliknięcia <a href="#">. Wymiana #z javascript:void(0);naprawił.

Pierwszą rzeczą, którą robię w poniedziałek, jest oczyszczenie projektu ze wszystkich przypadków <a href="#">.

Listy nieuporządkowane są często tworzone z zamiarem wykorzystania ich jako menu, ale element lilisty to tekst. Ponieważ lielementem listy jest tekst, kursor myszy nie będzie strzałką, ale „kursorem I”. Użytkownicy są przyzwyczajeni do wyświetlania palca wskazującego kursor myszy, gdy coś można kliknąć. Użycie znacznika kotwicy awewnątrz liznacznika powoduje, że wskaźnik myszy zmienia się w palec wskazujący. Palec wskazujący jest znacznie lepszy do korzystania z listy jako menu.

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

Jeśli lista jest używana w menu i nie potrzebuje linku, nie trzeba określać adresu URL. Problem polega jednak na tym, że jeśli pominiesz hrefatrybut, tekst w <a>znaczniku jest postrzegany jako tekst, a zatem wskaźnik myszy wraca do kursora I. Kursor I może sprawić, że użytkownik uzna, że ​​elementu menu nie można kliknąć. Dlatego nadal potrzebujesz href, ale nigdzie nie potrzebujesz linku.

Możesz użyć wielu tagów divlub pdo listy menu, ale wskaźnik myszy byłby również dla nich kursorem I.

Możesz użyć wielu przycisków ustawionych jeden na drugim do listy menu, ale ta lista wydaje się być lepsza. I prawdopodobnie dlatego to oznaczenie href="#"nigdzie nie jest używane w tagach zakotwiczenia wewnątrz tagów list.

Możesz ustawić styl wskaźnika w CSS, więc jest to kolejna opcja. href="#"Donikąd może być po prostu leniwy sposób ustawić kilka stylizacji.

Problem z użyciem href = "#" dla pustego linku polega na tym, że przeniesie Cię na górę strony, co może nie być pożądanym działaniem. Aby tego uniknąć, w przypadku starszych przeglądarek lub typów dokumentów innych niż HTML5 należy użyć

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

O ile wiem, zwykle jest to symbol zastępczy dla linków, do których dołączony jest JavaScript. Główny punkt linku jest obsługiwany przez wykonanie kodu JavaScript; przeglądarki z obsługą JS następnie ignorują prawdziwy cel linku. Jeśli przeglądarka nie obsługuje JS, znak skrótu zasadniczo zamienia łącze w brak działania. Zobacz także dyskretny JavaScript .

Jak wskazały niektóre inne odpowiedzi, aelement wymaga hrefatrybutu i #jest używany jako symbol zastępczy, ale jest to również artefakt historyczny.

Z sieci deweloperów Mozilla :

href

Był to jedyny wymagany atrybut dla kotwic definiujących hipertekstowy link źródłowy, ale nie jest już wymagany w HTML5. Pominięcie tego atrybutu powoduje utworzenie zastępczego łącza. Atrybut href wskazuje miejsce docelowe łącza, albo adres URL, albo fragment adresu URL. Fragment adresu URL to nazwa poprzedzona znakiem skrótu (#), który określa wewnętrzną lokalizację docelową (identyfikator) w bieżącym dokumencie.

Ponadto, zgodnie ze specyfikacją HTML5 :

Jeśli element nie ma atrybutu href, wówczas element reprezentuje symbol zastępczy, w którym w przeciwnym razie mógłby zostać umieszczony link, gdyby był odpowiedni, składający się tylko z zawartości elementu.

Atrybut href określa adres URL zasobu łącza. Jeśli tag kotwicy nie ma tagu href, nie stanie się hiperłączem. Atrybut href ma następujące wartości:

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>