【问题标题】:How to link to the top of a list item within the same page?如何链接到同一页面内列表项的顶部?
【发布时间】:2018-11-17 00:02:59
【问题描述】:

我尝试为 html 中的有序列表项创建ids,然后在同一页面中引用它们,如下所示:

<ol>
<li  id="item1">
Insert text here
</li>

<br>

<li id="item2">
Insert text here
</li>
</ol>

<a href="#item1">Item 1</a>
<a href="#item2">Item 2</a>

但是最终发生的是锚点最终指向项目中文本的底部,而不是项目编号。也就是说,当我点击Item 1时,会显示Item 2

因此,我的问题是,有没有办法链接到项目,以便实际显示链接到的项目?

注意:我正在 Moodle 页面上的文本字段(编辑器)中编辑文本,这可能是问题的根源。

【问题讨论】:

  • 首先你缺少一个标签。正确的链接应该是 Item 1 Item 2 如果没有标签,链接将被解析为 url 而不是你的锚点想要
  • 抱歉,我确实有标签,但忘记将它们包含在此处的示例中,问题仍然存在。我解决了这个问题。
  • 你能更清楚你在问什么吗?锚链接总是把你带到锚元素的顶部?我尝试重新创建您的 html,一切正常。
  • 那么这可能是一个问题,因为我在Moodle-document 的文本字段中以html模式编辑文本,并且网站的设置以某种方式搞砸了。我想这是相关信息,可能应该更新问题......
  • 你能附上确切的链接吗?

标签: html hyperlink html-lists


【解决方案1】:

对这个问题的一个丑陋的解决方法似乎是链接到所需目标之前的元素。在这种情况下,如果我想链接到item2,我应该链接到item1,而item1的情况应该参考上一段,这当然需要有自己的@ 987654324@.

【讨论】:

    【解决方案2】:

    您应该使用正确的方式来链接它们,以获得正确的结果。当您想链接到同一页面上的元素时,您应该使用&lt;a href="#id"&gt;&lt;/a&gt;。 没有 # 它不会给你想要的结果。

    【讨论】:

    • 我确实有#s,但忘记将它们包含在问题中。现在已修复,但问题仍然存在。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-23
    • 2018-07-09
    • 1970-01-01
    • 1970-01-01
    • 2012-12-12
    • 1970-01-01
    相关资源
    最近更新 更多