Jak utworzyć link do części strony? (haszysz?)


210

Jak łączysz (z <a>), aby przeglądarka przechodziła do niektórych podtytułów na stronie docelowej, a nie na górze?

Odpowiedzi:


275

Jeśli istnieje <a name="foo">tag lub dowolny tag z id(np. <div id="foo">), Możesz po prostu dołączyć #foodo adresu URL. W przeciwnym razie nie możesz arbitralnie linkować do części strony.

Oto kompletny przykład: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Łączenie treści na tym samym przykładzie strony: <a href="#foo">Jump to #foo on same page</a>



więc używasz pełnego przykładu lub tego samego przykładu strony? czy pełny przykład nie jest tym samym?
akantoword

2
gdybyśmy mieli spokojną stronę z adresem URL: domain.com/#home?page=1jak używać identyfikatora w href?
iraj jelodari

1
@irajjelodari Na końcu umieścisz skrót:domain.com/?page=1#home
tomsmeding

Musiałem użyć 2 hashtags w url, takich jak: example.com/#RouteName?page=1#ID. jeden do routingu i jeden do nawigacji wewnątrz bieżącej strony. w końcu użyłem trybu HTML5 adresu URL w celu usunięcia hashtagów trasy;) @tomsmeding
iraj jelodari

41

Używasz kotwicy i skrótu. Na przykład:

Cel łącza:

 <a name="name_of_target">Content</a>

Link do celu:

 <a href="#name_of_target">Link Text</a>

Lub w przypadku linków z innej strony:

 <a href="http://path/to/page/#name_of_target">Link Text</a>

8
Broser przeskoczy również do dowolnego elementu o identyfikatorze name_of_target. Nie musisz używać <a>tagu jako celu. Tak więc innym celem może być <h3 id='name_of_target'>Content</h3>.
Cyrille

8
Uwaga: w HTML5 jest to już przestarzałe.
Tim

33

Wystarczy dołączyć skrót do identyfikatora elementu do adresu URL. Na przykład

<div id="about"></div>

i

http://mysite.com/#about

Tak więc link wyglądałby następująco:

<a href="http://mysite.com/#about">About</a>

Lub tylko

<a href="#about">About</a>

21

Oto jak:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>

2
Ty co? Masz zamknięcie </a>po otwarciu <div ...>- naprawdę nie jestem pewien, co próbujesz tutaj zrobić.
Dominic Rodger

1
skopiowałem moją linię linku i wkleiłem poniżej i zapomniałem zamknąć div. W każdym razie dzięki.
Sarfraz

10

Masz dwie opcje:

Możesz umieścić kotwicę w swoim dokumencie w następujący sposób:

<a name="ref"></a>

Albo podasz identyfikator dowolnemu elementowi HTML:

<h1 id="ref">Heading</h1>

Następnie po prostu dodaj skrót #refdo adresu URL linku, aby przejść do żądanego odwołania. Przykład:

<a href="document.html#ref">Jump to ref in document.html</a>

6

W dniu 12 marca 2020 r. WICG dodało wersję roboczą dla fragmentów tekstu , a teraz możesz połączyć się z tekstem na stronie tak, jakbyś go szukał, dodając następujące elementy do skrótu

#:~:text=<Text To Link to>

Przykład roboczy nad Chrome Version 81.0.4044.138:

Kliknij ten link Należy ponownie załadować stronę i zaznaczyć tekst linku

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.