基于H3标签生成带对应href的侧边栏导航列表

我明白你的需求啦——要让侧边栏的每个列表项和页面里的h3标签完全对应：不仅文本一致，还要给li加上对应h3的id，同时生成指向该h3的锚点链接。咱们来一步步调整你的代码：

现有代码的核心问题 #

你当前的JS只收集了h3的文本内容，没有保存每个h3的id属性，所以没法把列表项和对应的标题建立关联。

修改后的JavaScript代码 #

我们要在遍历h3的时候，同时记录文本和id，再在创建列表元素时把这些属性补全：

jQuery(function($) {
  $(document).ready(function(){
    // 获取内容区所有h3元素
    const h3List = $('#content h3');
    // 创建ul容器并设置id
    const $sidebarUl = $('<ul>').attr('id', 'top-menu');

    // 逐个处理每个h3
    h3List.each(function() {
      const currentId = $(this).attr('id');
      const currentText = $(this).text();

      // 创建列表项，设置和h3相同的id
      const $listItem = $('<li>').attr('id', currentId);
      // 创建锚点链接，指向对应h3的id
      const $anchor = $('<a>').attr('href', `#${currentId}`).text(currentText);

      // 组装元素并添加到ul中
      $listItem.append($anchor);
      $sidebarUl.append($listItem);
    });

    // 把组装好的列表插入到侧边栏目标容器
    $('#sidemenu-container .wpb_wrapper').eq(1).append($sidebarUl);
  });
});

关键修改点说明 #

• 用jQuery的each遍历h3时，同时获取每个h3的id和文本内容
• 给每个<li>设置与对应h3完全相同的id
• 给<a>标签的href属性设置为#+h3的id，实现点击跳转至对应标题的锚点功能
• 简化了DOM操作逻辑，用jQuery链式调用让代码更简洁

最终生成的侧边栏结构 #

运行修改后的代码后，侧边栏会生成你期望的结构：

<div id="sidemenu-container">
  <div class="wpb_wrapper">
    <div class="wpb_wrapper">
      <ul id="top-menu">
        <li id="example-one"><a href="#example-one">Example One</a></li>
        <li id="example-two"><a href="#example-two">Example Two</a></li>
        <li id="example-three"><a href="#example-three">Example Three</a></li>
      </ul>
    </div>
  </div>
</div>

这样就完全实现了你想要的效果：列表项和对应h3共享id，点击链接可以直接跳转到页面中的对应标题位置。

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