同一页面内的锚点不起作用？

Question

我试图链接到我页面 HTML 中的元素，但它不起作用，我不确定原因。

这是初始链接：

 <ul>
    <a href="#"><li>About Me</li></a>
    <a href="#"><li>Past</li></a>
    <a href="#Work"><li>Work</li></a>
    <a href="http://blog.tommaxwell.me"><li>Blog</li></a>
</ul>

我希望此列表中的所有 li 都链接到页面上的其他地方（最后一个除外）。

在这段代码的顶部是我试图链接到的地方：

     <div id="Work">
    <a name="Work"><h2 id="work-title">Work</h2></a>
        <ul>
            <li>
                <h3>BrainDB</h3>
                <p>BrainDB is a new startup I'm working on with my co-founder, <a href="http://www.twitter.com/masonlong" id="mason">@masonlong</a>. I write everything from Rails to AngularJS and CSS. BrainDB's goal is to augment the mind with useful and inviting services.</p>
            </li>

            <li>
                <h3 id>SummarizeIt</h3>
                <p><a href="http://54.225.211.118/" id="summarize">SummarizeIt</a> is a JavaScript project that I built during a weekend. It utilizes an API for summarizing content, like blog posts, into bit-sized chunks. </p>
            </li>

            <li>
                <h3>Freelance</h3>
                <p>I freelance from time to time. I work with personal clients, as well as through <a href="https://www.elance.com/s/tommaxwell/?utm_medium=social&utm_source=twitter&utm_campaign=free&SiteTarget=share_profile&utm_term=3712117" id="elance">Elance</a>. I'm <a href="mailto:[e-mail]" id="email">available</a>.</p>
            </li>
        </ul>
    </div>

我链接到的区域是否必须使用 section 标签？我有多个带有 ul 的 div。

原文由 Tom Maxwell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这一点很重要。锚点不会在所有页面上工作，如果锚点的 href 是页面相关的（以 # 开头），则在头部（但根页面）有标记 <base> 。

例如你在页面上：

https://example.com/the/page/

页面上的基本标记如下：

 <base href="https://example.com">

在此页面的代码中有一个锚点：

 <a href="#anc">anchor</a>

使用 base-tag 它将跟随到 https://example.com/#anc ，而不是预期的。

要解决此问题，您可以执行以下操作之一：

1. 使用域相关锚点。
2. 使用 javascript 重载锚点击并将 url 交换为域相关。
3. 删除基本标签——它通常不被使用。

原文由 Alexander Goncharov 发布，翻译遵循 CC BY-SA 3.0 许可协议