您可以仅定位导航中的链接以使用 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 (将#修改为@）

html javascript swup