使用JavaScript创建动态菜单时href属性返回undefined导致链接失效的问题求助

嘿，别担心，这个问题其实很容易搞定！你遇到的href_el返回undefined的核心原因是：<h2>元素本身并没有href属性——这个属性是专门给<a>标签用的。你想要实现的应该是点击菜单链接跳转到页面对应标题的锚点功能，对吧？

问题出在哪？ #

你代码里的这一行：

var href_el = document.querySelectorAll("h2")[index].href;

因为<h2>不是链接元素，它天生就没有href属性，所以这行代码自然会得到undefined，导致菜单里的链接根本没法跳转。

解决方案：实现锚点跳转 #

要实现点击菜单跳转到对应标题，我们需要给每个<h2>设置唯一的id，然后让菜单里的<a>标签的href指向这个id（格式是#id名称）。

修改后的完整JavaScript代码：

var allH2 = Array.from(document.querySelectorAll("h2"));
var article = document.querySelector("article");
document.body.onload = addMenu;

function addMenu () {
    var menu = document.createElement("div");
    menu.setAttribute("class", "menu");
    
    var menu_title = document.createElement("h2");
    var title = document.createTextNode("Menu");
    menu_title.appendChild(title);
    menu.appendChild(menu_title);
    
    var list = document.createElement("ul");
    list.setAttribute("class", "list");
    menu.appendChild(list);
    
    allH2.forEach(function callback(element, index) {
        // 1. 给每个h2设置唯一的id（这里用索引+1生成，简单直接）
        var sectionId = "section-" + (index + 1);
        element.id = sectionId;
        
        var link = document.createElement("a");
        var content = document.createTextNode(element.textContent);
        var list_element = document.createElement("li");
        
        // 2. 设置a标签的href为锚点，指向对应的h2 id
        link.setAttribute("href", "#" + sectionId);
        
        list_element.setAttribute("class", "list-element");
        link.appendChild(content);
        list_element.appendChild(link);
        list.appendChild(list_element);
    });
    
    document.body.insertBefore(menu, article);
}

额外优化小技巧 #

如果你想让id更语义化（比如用标题文本生成），可以把设置id的代码改成这样：

// 把标题文本转成小写，空格替换成连字符，生成更友好的id
var sectionId = element.textContent.toLowerCase().replace(/\s+/g, "-");
element.id = sectionId;

这样Title 1对应的id就是title-1，既易读又规范。

另一种可选方式：手动在HTML里设置id #

如果你更习惯在HTML里直接给<h2>加id，比如：

<article class="article">
<h2 id="title-1">Title 1</h2>
<h2 id="title-2">Title 2</h2>
<h2 id="title-3">Title 3</h2>
</article>

那JS里就可以直接取element.id来设置锚点：

link.setAttribute("href", "#" + element.id);

这样修改后，你的菜单链接就能正常跳转到对应的标题位置啦！

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