与书签链接混淆的基本标签答案

【问题标题】：Base tag messing with bookmark links与书签链接混淆的基本标签
【发布时间】：2010-09-29 04:18:36
【问题描述】：

我有一个使用mod_rewrite 创建漂亮网址的 Joomla 网站。

http://www.example.com/resources/newsletter

然而，这产生了一个问题。包括这样的图像：src="images/pic.jpg"，然后它会在以下位置查找文件：

http://www.example.com/resources/newsletter/images/pic.jpg

...这显然不存在。为了解决这个问题，我在head 部分中添加了一个<base> 标签：

<base href="http://www.example.com/" />

...效果很好，直到我尝试在同一页面上创建指向锚点（书签）的链接：

<!-- on http://www.example.com/resources/newsletter -->
<a href="#footer">go to the footer</a>

<!-- clicking that link takes you to http://www.example.com/#footer -->

将我的链接更改为<a href="resources/newsletter/#footer"> 是不可行的，因为我在编辑它时不一定知道页面的 URL。有什么方法可以让某些链接忽略<base> 指令？

虽然我真的更喜欢直接的 HTML 解决方案，但我已经在这个网站上使用 jQuery，所以如果我遇到困难，这可能是一个选择。

【问题讨论】：

标签： html hyperlink

【解决方案1】：

是否可以将您的src 属性更改为/images/pic.jpg 之类的东西？这样就能达到你想要的效果了。

如果这不可能，这个（未经测试的）jQuery 代码应该适合你：

$('a[@href^="#"]').click(function() { 
  var hash = this.hash, el = $(hash), offset;
  if(!el.size()) {
    el = $("[@name=" + hash.slice(1) + "]");
  }

  offset = el.offset();
  window.scroll(offset.left, offset.top);
});

【讨论】：

【解决方案2】：

老问题，新答案.. 试试这个：

$('a[href^="#"]').on('click', function (event) { 
    event.preventDefault();
    window.location.hash = $(this).attr('href');
});

【讨论】：