Neocities网站目录链接无法跳转至标题问题求助

问题描述 #

我在Neocities的图形页面中添加了目录代码，完全参照示例编写，但目录无法正常工作——点击链接仅会变为紫色，无法跳转到对应标题。以下是我使用的目录代码：

<div id="toc_container">
        <p class="toc_title">Contents</p>
        <ul class="toc_list">
          <li><a href="#First_Point_Header">Pride Flags</a>
          <li><a href="#Second_Point_Header">Blinkies</a>
            <ul>
              <li><a href="#Second_Sub_Point_1">Splatbands</a></li>
              <li><a href="#Second_Sub_Point_2">Other Blinkies</a></li>
            </ul>
          </li>
          <li><a href="#Third_Point_Header">Stamps</a></li>
          <ul>
            <li><a href="#Third_Sub_Point_1">Game Consoles</a></li>
            <li><a href="#Third_Sub_Point_2">Magical Girls</a></li>
            <li><a href="#Third_Sub_Point_3">Memes</a></li>
            <li><a href="#Third_Sub_Point_4">TV Shows</a></li>
            <li><a href="#Third_Sub_Point_5">Video Games</a></li>
            <li><a href="#Third_Sub_Point_6">Cursed Images</a></li>
            <li><a href="#Third_Sub_Point_7">Retro</a></li>
            <li><a href="#Third_Sub_Point_8">Misc</a></li>
          </ul>
          <li><a href="#Fourth_Point_Header">Blinkie Icons</a></li>
          <ul>
            <li><a href="#Fourth_Sub_Point_1">Splatoon Icons</a></li>
            <li><a href="#Fourth_Sub_Point_3">Spooky Month Icons</a></li>
            <li><a href="#Fourth_Sub_Point_4">Homestar Runner Icons</a></li>
            <li><a href="#Fourth_Sub_Point_5">Cuphead Icons</a></li>
          </ul>
          <li><a href="#Fifth_Point_Header">Stickers</a></li>
          <ul>
            <li><a href="#Fifth_Sub_Point_1">Splatoon Stickers</a></li>
            <li><a href="#Fifth_Sub_Point_2">My Little Pony Stickers</a></li>
          </ul>
          <li><a href="#Sixth_Point_Header">Dividers</a></li>
          <li><a href="#Seventh_Point_Header">Misc Little Things</a></li>
          <li><a href="#Eighth_Point_Header">MIDIs</a></li>
        </ul>
      </div>
    </div>

问题原因 #

1. HTML结构嵌套错误：目录中的多个子<ul>标签未嵌套在对应的父<li>内部（比如“Stamps”的子列表直接放在了<li>外面），导致浏览器解析DOM结构异常，干扰锚点功能。
2. 锚点与目标id不匹配：目录链接中的锚点（如#First_Point_Header）在页面中找不到对应的id属性，浏览器无法定位跳转目标。

修复方案 #

1. 修正目录HTML结构 #

将所有子<ul>标签移入对应的父<li>内部，示例如下：

<li><a href="#Third_Point_Header">Stamps</a>
  <ul>
    <li><a href="#Third_Sub_Point_1">Game Consoles</a></li>
    <li><a href="#Third_Sub_Point_2">Magical Girls</a></li>
    <!-- 其余子列表项 -->
  </ul>
</li>

2. 为页面标题添加对应id #

给页面中每个需要跳转的标题添加与锚点匹配的id属性，例如：

<h2 id="First_Point_Header">Pride Flags</h2>
<h2 id="Second_Point_Header">Blinkies</h2>

内容的提问来源于stack exchange，提问作者Stish Stash