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


363

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

Odpowiedzi:


344

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://stackoverflow.com//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.


1
Pełna odpowiedź Ale jakie jest znaczenie terminu podgląd szablonu w Twojej odpowiedzi?
nadmierna wymiana

3
@overexchange Na przykład zobacz tę stronę i zawarte na niej linki: ironsummitmedia.github.io/startbootstrap-creative Po prostu strony HTML, które mają zademonstrować zestaw CSS / HTML, motywów WordPress itp., ale nie są prawdziwymi stronami, więc linki nie muszą nigdzie iść.
m59,

1
@Yeung Zmiana skrótu (jest to część adresu URL następującego po #) nie wywołuje serwera. Zmieniłbyś stronę za pomocą javascript. Jest wiele do powiedzenia na ten temat i wykracza to poza zakres tego postu.
m59

2
Ponadto losowy smakołyk, przeglądarki na Androida (przeglądarka, chrome itp.) Nie akceptują zdarzeń kliknięcia na niczym innym niż tagi kotwicy. Powiedzmy, że chcesz użyć .click()metody jQuery na <div></div>, to nie zadziała. Albo musi być na kotwicy, albo musisz użyć touchzdarzeń.
Steely

1
@QHarr Nie jestem pozytywny, ale powinno tak być, ponieważ puste „#” nie odnosi się do niczego, więc jest takie samo jak pozostawienie go, a pozostawienie go oznaczałoby tylko stronę, a strony zaczynają się od do góry, chyba że podano inaczej. Innymi słowy, może nie oznacza „przewijania na górę”, po prostu nic nie znaczy, tj. „Przejdź do tej strony”, co zdarza się, że oznacza przejście na górę strony.
m59

85

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


1
Element o identyfikatorze - nie musi to być nazwana kotwica (w rzeczywistości nazwane kotwice są już przestarzałe).
Oded

2
Przybyłem tutaj, ponieważ <a href="#">...</a>nie „nigdzie” nie opuszczałem strony i nie ładowałem się site.com/#. Jak to możliwe?
doug65536

7
@ doug65536 najprawdopodobniej dzieje się tak, ponieważ program onclickobsługi zdarzeń został powiązany z tym elementem, powodując wywołanie funkcji javascript, która przekierowała cię na tę stronę.
jtate

32

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.


40
Wystarczy dodać, że nie jest to link do nikąd ... na przewijanej stronie automatycznie przewinie cię do góry.
Misko

26

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


4
„Jeśli element kotwicy jest używany jako element inny niż kotwica, powinien mieć ustawiony href na javascript: void (0); ze względu na pełną wdzięku degradację.” [potrzebne źródło]
Vito De Tullio

Y, z i bez <base>naprawdę robi dużą różnicę dla #. Dzięki za wskazanie!
LeOn - Han Li

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="#">. Zastąpienie # javascript: void (0); naprawione. - Zrobiłem to samo i rozwiązałem mój problem.
Liang

23

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.


14

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>

2
Odkryłem, że to rozwiązanie jest szczególnie przydatne w jednym scenariuszu: w mojej aplikacji href = '"" służy do implementacji funkcji wylogowania (przywrócenia strony logowania). Jeśli użyję href = "#" w innym celu, kiedyś przeniesie mnie z powrotem na stronę logowania. Po zmianie href = "#" na href = "javascript: void (0)" problem został rozwiązany.
Liang

13

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 .


13

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.


1

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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.