我正在尝试向我的网站添加香草页面过渡。
我添加的 js(见下文)正在与我的所有锚点一起使用,但我想知道是否有一种方法可以将链接定位到具有
target="_blank"
或我可以定义的类的外部页面,因此该功能将不起作用这些链接。
// PAGE TRANSITION
window.onload = () => {
const anchors = document.querySelectorAll('a');
const transition_el = document.querySelector('.transition');
setTimeout(() => {
transition_el.classList.remove('is-active');
}, 350);
for (let i = 0; i < anchors.length; i++) {
const anchor = anchors[i];
anchor.addEventListener('click', e => {
e.preventDefault();
let target = getLink(e);
console.log(transition_el);
transition_el.classList.add('is-active');
console.log(transition_el);
setInterval(() => {
window.location.href = target;
}, 350);
})
}
}
function getLink(e) {
if (e.target.hasAttribute("href"))
return e.target.href;
var parent = e.target.parentNode;
while (parent != null && typeof parent.tagName != "undefined") {
if (parent.hasAttribute("href"))
return parent.href;
parent = parent.parentNode;
}
return null;
}
现在,事件忽略我的
target="_blank"
,进行转换并在同一选项卡中打开链接。有没有一种方法可以检查链接是否是外部链接而不进行转换?
附言。函数 getLink(e) 只是为了让我不会因为其中包含其他内容的锚点而出现未定义的错误。
使用非选择器排除目标
document.querySelectorAll('a:not([target="_blank"])').forEach(a => a.classList.add('test'));
a.test {
background-color: yellow;
}
<a href="//example.com">A</a>
<a href="//example.com">A</a>
<a href="//example.com" target="_blank">B</a>
<a href="//example.com" target="_blank">B</a>
<a href="//example.com">A</a>