1

问题的标题说明了一切，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]), 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)
4

0 回答 0