问题描述
问题的标题说明了一切,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 (将#修改为@)