锚标签跳到哈希不工作

Question

我已经阅读了关于这个主题的各种帖子,并认为我理解通常的失败点.我发现我的两个产品缩略图图片,在"This Click'n'Pick Set包含以下2个产品"标题下,可以点击,但不要带我到<div>页面下方的命名元素.相反,它们会导致导航到http://www.premierrange.co.uk/#bundle_product_anchor_448.我在Linux上的Chrome(18.0.1025.33 beta)和Firefox(10.0.1)中看到了这一点.

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>,万一目标必须是内联元素而不是div,但似乎没有任何效果.

所述<div>含有严重表现<a>完全被时间关闭<div>含有目标元素出现在文档中.我不认为<a>在浏览器解析的时间点没有定义目标元素存在问题.

手动将"#bundle_product_anchor_448"添加到URL确实有效.

我知道由于我无法轻易解决的大量因素,该页面在大量点上无法进行HTML验证.我认为这个基本的'跳转到命名元素'功能应该可以正常工作.除了这个小小的导航怪癖之外,该页面功能完全正常.

有人有任何线索吗？

Answer 1

尝试<base href="http://www.premierrange.co.uk/"></base>从页眉中删除.

该<base>标记指定的基本URL或目标为所有相对URL(那些不说http://www.example.com/ ...)你的页面上.没有它,您的链接应该按预期运行,但您可能必须修复其他链接以适应此更改.

Answer 2

在应用程序中使用<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>，该操作可能会对应用程序的其他区域产生负面影响。