Привязка тега к переходу на хеш не работает - PullRequest
Новая
       17

Привязка тега к переходу на хеш не работает

4 голосов
/ 23 февраля 2012

Я прочитал различные посты на эту тему и думаю, что понимаю обычные точки отказа.Я нахожу, что два моих миниатюрных изображения продукта под заголовком «Этот набор Click'n'Pick состоит из следующих 2 продуктов» являются кликабельными, но не приводят меня к названному элементу <div> ниже по странице.Вместо этого они вызывают навигацию к http://www.premierrange.co.uk/#bundle_product_anchor_448,, например.Я вижу это как в Chrome (18.0.1025.33 beta), так и в Firefox (10.0.1) в Linux.

http://www.premierrange.co.uk/index.php?main_page=clicknpick&groups_id=2&chosen_0=243&chosen_1=448

Так, например, есть якорный таргетинг '# bundle_product_anchor_243': 

<a href="#bundle_product_anchor_243" title="Click here to jump to the 70cm Truly Curved Black Glass Curved Cooker Hood H77-7B">
    <img src="http://www.premierrange.co.uk/thumbnailer.php?filename=images/H77-700.jpg&amp;height=100" alt="70cm Truly Curved Black Glass Curved Cooker Hood H77-7B">
</a>

Это нацелено на <div> дальше вниз по странице: 

<div class="productSeparator" id="bundle_product_anchor_243">
    <h1>Product number 1 in this bundle of 2 products</h1>
</div>

Я также пытался сделать цель <h1> внутри цели <div> вместо цели, вcase цель должна быть встроенным элементом, а не div, но, похоже, ничего не работает.

<div>, содержащий некорректно <a>, полностью закрывается к тому времени, когда <div> содержит целевой элементпоявляется в документе.Я не думаю, что есть проблема с целевым элементом, который не был определен в тот момент, когда <a> анализируется браузером.

Ручное добавление "# bundle_product_anchor_448" к URL-адресу работает.

Мне известно, что страница не проходит проверку HTML по большому количеству точек из-за большого количества факторов, которые я не смогу легко устранить.Я бы подумал, что эта базовая функциональность «переход к названному элементу» должна работать независимо.Страница полностью функциональна, кроме этой маленькой странности навигации.

Кто-нибудь получил какие-нибудь подсказки?

Ответы [ 2 ]

6 голосов
/ 23 февраля 2012

Попробуйте удалить <base href="http://www.premierrange.co.uk/"></base> из заголовка страницы.

Тег <base> указывает базовый URL-адрес или цель для всех относительных URL-адресов (тех, которые не обозначают http://www.example.com/...) на вашемстраница. Без нее ваша ссылка должна работать должным образом, хотя вам, возможно, придется исправить другие ссылки, чтобы учесть это изменение.

2 голосов
/ 29 августа 2014

При использовании тега <base> в вашем приложении наилучшим подходом будет просто использовать абсолютные URL-адреса перед хэшем, причем абсолютный URL-адрес указывает на ту же страницу, на которой вы находитесь.

Итак,при условии, что вы находитесь на странице 'http://example.com/products/curved-glass', вместо 

<a href="#bundle_product_anchor_243">...

вам нужно будет включить абсолютный текущий URL перед хешем: 

<a href="http://example.com/products/curved-glass#bundle_product_anchor_243">...

Узнатьтекущий URL является тривиальной задачей в большинстве сред, и этот метод также позволяет избежать удаления вашего тега <base>, что может иметь негативные последствия в других областях вашего приложения.

...