我尝试用我相当弱的javascript技能创建一个菜单。
我的html页面看起来像:
<html>
<head>
...
</head>
<body>
<article class="article">
<h2>Title 1</h2>
<h2>Title 2</h2>
<h2>Title 3</h2>
</article>
</body>
</html>
My script:
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) {
var link = document.createElement("a");
var content = document.createTextNode(element.textContent);
var list_element = document.createElement("li");
var href_el = document.querySelectorAll("h2")[index].href;
list_element.setAttribute("class", "list-element");
link.setAttribute("href", href_el);
link.appendChild(content);
list_element.appendChild(link);
list.appendChild(list_element);
});
document.body.insertBefore(menu, article);
}
问题是forEach中的.href返回我undefined，然后链接不起作用。
PS:对不起，我的英语水平相当低:'c
这一行将尝试从它没有的h2标签中获取链接:
var href_el = document.querySelectorAll("h2")[index].href;
如果你想能够点击链接并滚动到页面的那一部分，你可以使用js或url片段。为了简单，我建议使用url片段。
url片段链接将滚动到具有相应id的项目(href="#thediv"的元素将滚动到id="thediv"的元素)
你可以试试:
var href_el = '#htwo' + index;
document.querySelectorAll("h2").id = 'htwo' + index;
这是因为您试图从h2元素中获得href属性，但他们没有它(至少在您发布的HTML片段中)。
我创建了一个快速的StackBlitz来显示这里的问题。
为了解决这个问题，您可以在h2元素中添加href属性，但我建议您使用data-href作为前缀，因为它是一个自定义属性。更多信息在这里