Як зв’язати частину сторінки? (хеш?)

210

Як ви зв’яжете (з <a>), щоб браузер перейшов до певного підзаголовка на цільовій сторінці, на відміну від верхнього?

html xhtml anchor

275

Якщо є <a name="foo">тег або будь-який тег з id(наприклад, <div id="foo">), ви можете просто додати #fooURL-адресу. В іншому випадку ви не можете довільно посилатися на частини сторінки.

Ось повний приклад: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Посилання вмісту на одному прикладі сторінки: <a href="#foo">Jump to #foo on same page</a>

— Даніель Діпаоло
джерело

60

Лише зауваження: У HTML5 більше немає name-attribute for -elements <a>: атрибут name на елементі є застарілим. Поміркуйте замість цього, щоб надати атрибут id на найближчий контейнер.

— вставитикористувач туди

ви використовуєте повний приклад або той самий приклад сторінки? хіба не повний приклад те саме?

— akantoword

2

якби у нас була сторінка із спокійним URL-адресою на кшталт: domain.com/#home?page=1як використовувати ідентифікатор у href?

— iraj jelodari

1

@irajjelodari Ви поставили хеш в кінці:domain.com/?page=1#home

— допис

я повинен був використовувати 2 хештегів в URL , як: example.com/#RouteName?page=1#ID. один для маршрутизації та один для навігації по поточній сторінці. нарешті, я використовував html5 режим URL для видалення хештегів маршруту;) @tomsmeding

— iraj jelodari

41

Ви використовуєте якір і хеш. Наприклад:

Ціль посилання:

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

Посилання на ціль:

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

Або якщо посилання з іншої сторінки:

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

— Майкл Аарон Сафян
джерело

8

Браузер також перейде до будь-якого елемента з ідентифікатором name_of_target. Не потрібно використовувати <a>тег як ціль. Тож може бути інша мета <h3 id='name_of_target'>Content</h3>.

— Кирила

8

Зауважте, це тепер застаріло в HTML5.

— Тім

33

Просто додайте хеш із ідентифікатором елемента до URL-адреси. Напр

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

і

http://mysite.com/#about

Так посилання виглядатиме так:

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

або просто

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

— Фелікс Клінг
джерело

21

Ось як:

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

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

— Сарфраз
джерело

2

Ви, що? У вас закриття </a>після відкриття <div ...>- не дуже впевнений, що ви намагаєтеся зробити тут.

— Домінік Роджер

1

Я скопіював своє посилання та встав внизу і забув закрити дів. Спасибі все одно.

— Сарфраз

10

У вас є два варіанти:

Ви можете або помістити якір у свій документ таким чином:

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

Або ви надаєте ідентифікатор будь-якому HTML-елементу:

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

Потім просто додайте хеш #refдо URL вашого посилання, щоб перейти до потрібної посилання. Приклад:

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

— Даніель Вассалло
джерело

6

12 березня 2020 р. Проект WICG для текстових фрагментів додав проект , і тепер ви можете посилатися на текст на сторінці так, як ніби ви шукали його, додавши в хеш наступне

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

Робочий приклад щодо Chrome Version 81.0.4044.138:

Натисніть на це посилання Якщо слід перезавантажити сторінку та виділити текст посилання

— Абдеррахмане TAHRI JOUTI
джерело