Hello,
I have successfully created a JavaScript code that can dynamically add menu tabs into the menu list
window.addEventListener("load", () => {
const navList = document.getElementById("nav_list")
const fragment = document.createDocumentFragment();
const sections = document.querySelectorAll("section")
const ui = document.querySelectorAll("ul")
sections.forEach((sec) => {
let data = sec.getAttribute("data-nav")
let li = document.createElement("li")
let text = document.createTextNode(data)
li.classList.add("menu-link")
let a = document.createElement("a")
a.addEventListener("click", () => {
sec.scrollIntoView({ behavior: 'smooth' })
})
a.appendChild(text)
li.appendChild(a)
fragment.appendChild(li)
})
navList.appendChild(fragment)
However, I am facing an issue in adding the active class to the tabs
This is the structure of the menu list in HTML
<nav class="navbar-menu">
<h3>LOGO</h3>
<div class="nav-bar">
<label id="icon">
<i class="fas fa-bars" onclick="toggle()"></i>
</label>
<ul id="nav_list" class="navbar-list"></ul>
</div>
</nav>
I am looking for a vanilla JavaScript solution to resolve this issue