2

我有一个问题应该是一个非常简单的任务：创建一个 BBCode 标记来创建一个文本锚，并创建另一个来跳转到该文本锚。

但是，发生了一些事情，这导致我的锚点跳转到网站的根目录。

这是 BBCode 生成的 HTML：

<div id="section1">Section Header</div>
<a href="#section1">Goto Section Header</a>

但是，当它在实时页面中时，单击它将跳转到网站的根目录而不是当前页面。这是在 Firefox 和 Chrome 中测试的。我不知道我错过了什么。

这是一个使用 BBCode 的实时示例页面（锚点源中的文本搜索 section1）。 http://community.playstarbound.com/index.php?help/bb-codes

如您所见，单击“转到”下的链接会将您带到http://community.playstarbound.com/#section1而不是http://community.playstarbound.com/index.php?help/bb-codes #section1符合预期。

这个 div 和锚标记是否有任何外部因素会导致这种情况？

4

3 回答 3

3

问题

浏览器似乎无法正确识别您网页的基本 URL。因此，您的锚链接的相对 URL 当前被浏览器解释为

http://community.playstarbound.com/#some-anchor

实际上它的实际 URL 应该是

http://community.playstarbound.com/index.php?threads/expand-the-bb-code-selection.15492/#some-anchor

由于链接的 URL 与当前页面的 URL 不同，它会导致浏览器将其视为常规链接，而不是当前页面中的内部锚点，从而将您重定向到站点的根目录。

解决方案

  1. 在锚链接中指定绝对路径。
  2. 编辑：按照您的建议，更正您网站base标签中指定的值。
于 2013-02-23T21:54:57.977 回答
2

我如何修复它：

我无法更正base标签中指定的值。而且我无法指定绝对路径。相反，我做了一点 javascript 魔术。

<a href="javascript:;" onclick="window.location.hash = 'some-anchor';">

这解决了我的问题。

于 2013-02-23T22:29:46.137 回答
1

我们许多人在前 MVC 世界中使用的页内锚点肯定会导致 MVC 中的 PITA。我使用了两种不同的修复方法：

  1. 如果您只是使用'href = #'并且不需要它在任何地方导航，那么使用jquery“e.preventDefault”。如：

$('(Your attribute, class, and/or ID) a).click(function (e) {
  //whatever else you might want to do, i.e. highlight,etc...
  e.preventDefault(); //Prevent in-page anchor from navigating to root of site
});

（我已经在脚本中看到了足够多的“href='#'”，所以我不再问了，也不再问我为什么了）。

  1. If you're wanting to navigate somewhere else in the page, add a similar jQuery, but instead of e.preventDefault(), you'll just "return false;". For example, if you have an item <span><a class="fa fa-arrow-down down-to-bottom" href="#footer">&nbsp;down</a></span> that you need to go to page bottom, this will do that and shouldn't throw you out to the 'root':

$('.down-to-bottom').click(function () {
    $('html, body').animate({
      scrollTop: $(document).height()
    }, 1500, 'easeInOutExpo');
    return false;
});

Modify it however you want to go to somewhere besides the bottom (like to another "div") --just be sure to "return false;".

Either of these can probably be done in 'vanilla' javascript too. I usually use jQuery because it's easier for me and a lot of others.

于 2019-09-20T07:28:57.543 回答