JavaScript菜单链接无法打开：已实现active类切换但href不生效

你开发的JavaScript菜单已经实现了点击时给当前元素添加active类、移除其他元素的该类，也正确设置了href属性，但点击时链接始终无法打开，相关代码如下：

JavaScript代码 #

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>

问题根源 #

核心原因是你在点击事件处理函数里调用了e.preventDefault()——这个方法的作用就是阻止标签的默认跳转行为，所以哪怕href属性设置正确，点击也不会触发页面跳转。

解决方案 #

方案1：直接允许默认跳转（最常用）

如果只需要完成类切换后正常跳转，直接删除e.preventDefault();这一行即可。浏览器会先执行类切换的逻辑，再触发页面跳转，类的修改会正常生效。

修改后的事件代码：

elementul.addEventListener('click', function (e) {
    li.forEach(liElement => {
        liElement.classList.remove('active');
    });

    elementul.classList.add('active');

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

方案2：手动控制跳转（适合有异步操作的场景）

如果需要先执行异步操作（比如请求数据、动画效果），再跳转页面，可以保留e.preventDefault()，在逻辑完成后手动触发跳转：

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

    // 执行类切换逻辑
    li.forEach(liElement => {
        liElement.classList.remove('active');
    });
    elementul.classList.add('active');

    // 模拟异步操作（比如API请求）
    setTimeout(() => {
        // 手动跳转到目标地址
        window.location.href = elementul.href;
    }, 500);
});

内容的提问来源于stack exchange，提问作者Claudiu C