我无法使用纯 JavaScript 创建动态导航菜单

Question

我尝试使用纯 JavaScript 创建动态导航菜单，但代码不起作用。

我创建了一个空的无序列表，它将使用 JavaScript 自动填充

 // Identify container, sections and empty unorder list. const menu = document.getElementById("menu"); const sections = [...document.querySelectorAll("section")] const nav_menu_items = () => { let nav_menu_container = ''; sections.foreach(section => { const sectionID = section.id; const sectionAtrribute = section.dataset.nav; nav_menu_container += `<li> <a class="menu_item_link" href="#${sectionID}">${sectionAtrribut}</a></li>` }) menu.innerHTML = nav_menu_container; } nav_menu_items();

 <body> <header> <nav> <ul id="menu"></ul> </nav> </header> <section id="container" class="container" data-section="big"> <div id="section1" class="section" data-nav="section1">This is section 1 so hello</div> <div id="section2" class="section" data-nav="section2">This is section 2 so hello</div> <div id="section3" class="section" data-nav="section3">This is section 3 so hello</div> <div id="section4" class="section" data-nav="section4">This is section 4 so hello</div> </section> </body>

Answer 1

在这里更正了三件事：-

[...document.querySelectorAll("section")]应该是[...document.querySelectorAll(".section")]因为section是 class 并且您需要在 class 前面加上. 传入querySelector/querySelectorAll时。
它是forEach而不是foreach 。
sectionAtrribut应该是sectionAtrribute

 <body> <header> <nav> <ul id="menu"></ul> </nav> </header> <section id="container" class="container" data-section="big"> <div id="section1" class="section" data-nav="section1">This is section 1 so hello</div> <div id="section2" class="section" data-nav="section2">This is section 2 so hello</div> <div id="section3" class="section" data-nav="section3">This is section 3 so hello</div> <div id="section4" class="section" data-nav="section4">This is section 4 so hello</div> </section> <script> // Identify container, sections and empty unorder list. const menu = document.getElementById("menu"); const sections = [...document.querySelectorAll(".section")] const nav_menu_items = () => { let nav_menu_container = ''; sections.forEach(section => { const sectionID = section.id; const sectionAtrribute = section.dataset.nav; nav_menu_container += `<li> <a class="menu_item_link" href="#${sectionID}">${sectionAtrribute}</a></li>` }) menu.innerHTML=nav_menu_container; } nav_menu_items(); </script> </body>

我无法使用纯 JavaScript 创建动态导航菜单

问题描述

1 个解决方案

解决方案1
3 已采纳 2021-03-21 16:38:31

我无法使用纯 JavaScript 创建动态导航菜单

问题描述

1 个解决方案

解决方案1 3 已采纳 2021-03-21 16:38:31

解决方案1
3 已采纳 2021-03-21 16:38:31