我遇到了以下的问题。我做了一个登陆页面,通过纯javascript链接到页面部分,一切看起来都很好,超级好。但是,我想添加一个常规的〈a〉〈/a〉链接,结果它不起作用,我理解原因在于event.preventDefault();但如果将其删除,则主脚本将中断
document.querySelector('.nav').addEventListener("click", (event) => {
event.preventDefault();
let elementOffset = 0;
let parent = document.querySelector('.nav');
let menuItem = parent.querySelectorAll('.nav__link');
if(event.target.classList.contains('nav__link')) {
for (let i = 0; i < menuItem.length; i++) {
menuItem[i].classList.remove('active');
}
}
let elementId = event.target.getAttribute('data-scroll');
let element = event.target;
if(elementId && element){
elementOffset = getElementScrollOffset(elementId);
scrollToTop(elementOffset);
element.classList.add('active');
}
});
<div class="header__inner">
<div class="header__logo" data-scroll="#intro"></div>
<nav class="nav" id="nav">
<a class="nav__link active" href="#" data-scroll="#about">about</a>
<a class="nav__link" href="#" data-scroll="#services">services</a>
<a class="nav__link" href="#" data-scroll="#mods">Сmods</a>
<a class="nav__link" href="#" data-scroll="#updates">updates</a>
<a class="nav__link" href="#" data-scroll="#footer">Кfooter</a>
<a class="nav__link" href="https://www.google.com/" target="_blank">Discord</a>
</nav>
</div>
如果您删除事件. preventDefault();而不是去它,它把我带到顶部页面。是的,我理解你可以在. nav元素之外插入一个链接,但我需要它在那里。帮助pls:)
1条答案
按热度按时间rekjcdws1#
如果单击的链接不是页内锚,则需要在单击处理程序中阻止代码执行。可以通过检查单击的
<a>
元素的href
不等于#
来实现此目的。可以通过如下修改处理程序来实现此目的:我创建了一个fiddle以供参考。