我無法使用純 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