Question

我正在尝试使用<a href="#...">表示法创建一组指向页面中特定部分的链接，但它似乎不起作用。点击该链接似乎什么也不做，right-click -> open in a new tab更改了网址，但没有移动到页面的其他部分。我使用的是Firefox 28.0。我的链接如下：

<div>
    <p>Contents</p>
    <ul>
        <li><a href="#map">Map</a></li>
        <li><a href="#timing">Timing</a></li>
        <li><a href="#timingdetails">Timing Details</a></li>
    </ul>
</div>

他们应该链接到：

<div id="map">[content]</div>
<div id="timing">[content]</div>
<div id="timingdetails">[content]</div>

外部网页链接正常。将id="..."功能置于<a>标记内，却无法解决问题。我的网页网址格式为http://127.0.0.1/foo/bar/baz/。这是在Python Django项目中。

知道为什么这不起作用吗？

Answer 1

每个href都需要相应的锚点，其名称或 id 属性必须与href匹配#标志。如，

<a href="#map">Map</a>

<a name="map">[content]</a>

如果不用于其他目的，则无需附上div。

Answer 2

哇，谢谢你指出OP。显然，Mozilla Firefox并没有将id属性与HTML文档中的位置关联，而是用于<a>以外的元素，而是使用name属性，而谷歌Chrome则完全相反。最跨浏览器的证明解决方案是：

1.给divs和name id锚定<a href="#map">Go to Map</a>  ---- <div id="map" name="map"></div> 以确保最大值。浏览器兼容性，例如：

<a>

演示：http://jsbin.com/feqeh/3/edit

2.仅使用name属性作为主播的{{1}}标记。

这将允许页面上的链接在所有浏览器中都有效。

Answer 3

我发生的事情是href does not work second time因为我应该Remove hash首先评价，

看看我是如何解决它的

<a href="#1" onclick="resetHref();">go to Content 1</a>

function resetHref() {
    location.hash = '';
}

Answer 4

<a href="#1">Content 1</a>    
<a href="#2">Content 2</a> 
<a href="#3">Content 3</a>
....
<a name="1"></a>Text here for content 1
<a name="2"></a>Text here for content 2
<a name="3"></a>Text here for content 3

点击＆＃34;内容1＆＃34;它将直接转到＆＃34;文本在这里为内容1。保证！

Answer 5

这可能有帮助

JS：

String token = JWT.create()
                .withSubject(((LdapUserDetails) authentication.getPrincipal()).getUsername())
                .withExpiresAt(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
                .sign(HMAC512(SECRET.getBytes()));
        response.addHeader(HEADER_STRING, TOKEN_PREFIX + token);

        Object redirectURLObject = request.getSession().getAttribute(REDIRECT_URL_SESSION_ATTRIBUTE_NAME);

        if(redirectURLObject != null)
            setDefaultTargetUrl(redirectURLObject.toString());
        else{
            setDefaultTargetUrl("http://localhost:8000");
        }
request.getSession().removeAttribute(REDIRECT_URL_SESSION_ATTRIBUTE_NAME);
        super.onAuthenticationSuccess(request, response, authentication);

HTML：

function goto($hashtag){
     document.location = "index.html#" + $hashtag;
}

Answer 6

只是因为我有一个类似的问题，而原因是其他原因，才复活这篇文章。

在我的情况下，是因为我们有：

<base href="http://mywebsite.com/">

在上定义。

显然，不要只是删除它，因为如果您使用相对路径，则需要它。

在此处了解更多信息： https://www.w3schools.com/tags/tag_base.asp

Answer 7

这是我最终在IE，Chrome和Firefox中工作的东西。

在任何文本周围创建一个这样的锚标记：

<a class="anchor" id="X" name="X">text</a>

将“X”设置为您想要的任何内容。

您必须将某些内容包含在锚标记中，例如文本或图像。没有这些就行不通。

对于链接，请使用：

<a href="#X">text</a>

至于使用我们的锚标签去除链接的CSS，请使用以下内容：

a.anchor {
color:#000;
text-decoration:none;
}

这似乎运作良好。

<a href="#..."> link not working</a>

7 个答案: