如何解决您可以仅定位导航中的链接以使用 swupjs 进行转换吗?
问题的标题说明了一切,swupjs 文档说您可以使用以下对象定位链接:
const options = {
linkSelector:
'a[href^="' +
window.location.origin +
'"]:not([data-no-swup]),a[href^="/"]:not([data-no-swup]),a[href^="#"]:not([data-no-swup])'
};
这里的问题是我只想定位导航中的链接,而不是所有页面上的所有链接。 我试过这样的事情,得到所有的href属性,如:
const navLinks = document.querySelectorAll(".site-header__link");
let linkAttributes = "";
navLinks.forEach((link)=>{
linkAttributes += `${link.getAttribute("href")},`;
})
const options = {
containers: ["#swup"],linkSelector:`a[href^="${linkAttributes}"]:not([data-no-swup]),a[href^="#"]:not([data-no-swup])`,plugins: [
new SwupOverlayTheme({
color: "linear-gradient(270deg,#001d31 19.98%,#004777 55.99%)",}),],};
我也尝试将 href-s 作为数组,并为不同的链接创建完整的行:
linkAttributes += `a[href^="${link.getAttribute("href")}"]:not([data-no-swup]),`;
main-link/targeted-link/(don't do any transitions anymore)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。