超链接未在我的 JavaScript 菜单上打开

Question

在此菜单中，我可以将类“active”放在单击的元素上，并将其从其他元素中删除，设置 href 但 href 未打开。问题出在哪里？

const li = document.querySelectorAll('.list-item');
const arr = ['Home', 'About', 'Contact', 'Projects'];

li.forEach((elementul, index) => {
    elementul.setAttribute('href', arr[index].toLocaleLowerCase() + '.html');

    elementul.addEventListener('click', function (e) {
        e.preventDefault();

        li.forEach(liElement => {
            liElement.classList.remove('active');
        });

        elementul.classList.add('active');

        console.log(elementul.href);
    });
});

html :
<li class='pagini' > 
 <a class='list-item'href='#' >${element} </a>            
</li>

Answer 1

你如何获得元素数组，我只想在每个 li 元素上创建一个类，然后执行

var li = document.getElementsByClassName("ClassNameOfli")

如果这不起作用，请尝试将代码放入异步函数中

li.forEach((elementul, index) => {
elementul.setAttribute('href', arr[index].toLocaleLowerCase() + '.html');

elementul.addEventListener('click', function (e) {
        e.preventDefault();
        addActive();
    });
});


async function addActive()
{
    await li.forEach(liElement => {
        liElement.classList.remove('active');
    });

    elementul.classList.add('active');

    console.log(elementul.href);
}