[英]I make display nav bar menu. Why do I have to get id for list?
我制作顯示導航欄菜單。 根據課程，我必須在 javascript 中獲取列表的 ID（代碼：list.id = section.id）？ 為什么？ https://github.com/Loc1111/Udacity_Landing-Page
const navbarMenu = document.getElementById('navbar__list'); const sections = document.getElementsByTagName('section'); for(section of sections){ const list = document.createElement('li'); list.id = section.id; list.innerText = section.dataset.nav; list.classList.add('menu__link'); navbarMenu.appendChild(list); }
.navbar__menu.menu__link { display: block; padding: 1em; font-weight: bold; text-decoration: none; color: #000; }
<!DOCTYPE html> <html lang="en"> <body> <header class="page__header"> <nav class="navbar__menu"> <ul id="navbar__list"></ul> </nav> </header> <main> <header class="main__hero"> <h1>Landing Page </h1> </header> <section id="section1" data-nav="Section 1" class="your-active-class"> </section> <section id="section2" data-nav="Section 2"> </section> <section id="section3" data-nav="Section 3"> </section> <section id="section4" data-nav="Section 4"> </section> </main> </body> </html>
你不能有兩個相同的ID
您需要將 href 鏈接添加到該部分
const navbarMenu = document.getElementById('navbar__list'); const sections = document.getElementsByTagName('section'); for(section of sections){ const list = document.createElement('li'); const a = document.createElement('a'); a.href = '#' + section.id; a.innerText = section.dataset.nav; list.appendChild(a); list.classList.add('menu__link'); navbarMenu.appendChild(list); }
.navbar__menu.menu__link { display: block; padding: 1em; font-weight: bold; text-decoration: none; color: #000; }
<!DOCTYPE html> <html lang="en"> <body> <header class="page__header"> <nav class="navbar__menu"> <ul id="navbar__list"></ul> </nav> </header> <main> <header class="main__hero"> <h1>Landing Page </h1> </header> <section id="section1" data-nav="Section 1" class="your-active-class"> </section> <section id="section2" data-nav="Section 2"> </section> <section id="section3" data-nav="Section 3"> </section> <section id="section4" data-nav="Section 4"> </section> </main> </body> </html>
我正在嘗試使用固定位置菜單制作響應式網站。 如何獲得菜單div的大小以將容器下推？
[英]I'm trying to make a responsive website with a fixed position menu. How do I get the size of the menu div to push the container down?
如何創建帶有徽標和某些選項和搜索欄的下拉列表的導航欄鏈接菜單？
[英]How do I create a nav bar link menu with a logo and a dropdown list for some of the choices and a search bar?
如何讓我的導航菜單在導航欄下方而不是在導航欄內部打開？
[英]How do I get my nav menu to open beneath the navigation bar and not inside of it?
如果我在其他頁面上包含一個nav_bar.html文件，如何顯示哪個菜單項處於活動狀態？
[英]If I have one nav_bar.html file that is included on other pages, how do I show which menu item is active?
如何修復導航欄，以便在該人未查看導航欄時刪除菜單？ | CSS / Javascript
[英]How Do I Fix the Nav Bar So That the Menu is Removed when the person is not viewing the nav bar? | CSS / Javascript
BOOTSTRAP：如何讓我當前的導航欄有一個下拉選項？
[英]BOOTSTRAP: How do I get my current Nav bar to have a dropdown option?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.