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

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:tommaxwell95@gmail.com" id="email">available</a>.</p>
            </li>
        </ul>
    </div>

我链接的区域是否必须使用section标签？我有多个这些div,其中包含ul.

Answer 1

嗨，您必须使用“a id”才能被“a href”调用

这是示例：

<a href="#Works">My Works</a>

它会调用：

<a id="Works">Works</a>

演示

Answer 2

这一点很重要。<base>如果锚的href相对于网页（以开头），则锚不会在所有页面上都起作用，而是在标头（但在根页面）中有标记#。

例如，您在页面上：

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

页面上的基本标记是这样的：

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

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

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

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

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

1. 使用相对于域的锚。
2. 使用javascript重载锚定点击，并将网址交换为相对于域的网址。
3. 删除基本标签-它经常不使用。

Answer 3

锚点需要具有工作的 ID 或名称，但您使用了两次。

HTML 标签 - 链接

<a href="#Anchorname">linked text</a>

(Target point) 
<a name="Anchorname">a named anchor</a>