1

Title of the question says it all, swupjs documentation said that you can target links with object like:

const options = {
  linkSelector:
    'a[href^="' +
    window.location.origin +
    '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])'
};

The problem here is that I only want to target links in navigation, not all links on all pages. I tried something like this, get all href attributes like:

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%)",
    }),
  ],
};

Also I tried putting href-s as array, and also creating full line for different link:

linkAttributes += `a[href^="${link.getAttribute("href")}"]:not([data-no-swup]), `;

If it makes easier to get solution, this is example of links:

main-link/targeted-link/(don't do any transitions anymore)
luka_dod
  • 11
  • 1

0 Answers0