Jump to content

Is there a way to style this link?

Go to solution Solved by jpeter,

Recommended Posts

Posted

URL: https://www.jconstantino.net/see

HI all. Am looking for a way to style the links that say "all", "creative direction", "copywriting", etc. 

Right now, this page is set up as a blog page, and each project is its own blog post. Each of the links above is a link to filter blog posts by tag/category. 

So while I'm guessing there's no way to create an "active" state style for those links, I'm wondering if there's some way to style the "last link clicked"? Or any other creative ideas like that?

Thank you in advance! 

  • Replies 3
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution
Posted

@jcny85 

STEP 1: 
Add the following JavaScript code to the Footer using Code Injection.  This script adds an "active" class on the link that matches whatever filter is defined in the query parameter in the URL. 

(function () {
    // Get all the links inside the specified container
    const links = document.querySelectorAll("#block-yui_3_17_2_1_1705961330405_3743 a");

    // Get the query parameter from the URL
    const urlSearchParams = new URLSearchParams(window.location.search);
    const urlTag = urlSearchParams.get("tag");

    // Loop through each link and check if its query parameter matches the one in the URL
    links.forEach((link) => {
        const linkSearchParams = new URLSearchParams(link.href.split("?")[1] || "");
        const linkTag = linkSearchParams.get("tag");

        // Add the "active" class if the query parameters match
        if (linkTag === urlTag) {
            link.classList.add("active");
        }
    });
})();

 

Step 2:
You can now style the class like so using the following CSS:

/* Style active blog filter link */
#block-yui_3_17_2_1_1705961330405_3743 .active {
    color: blue;
}

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Posted

Hi @jpeter -- thank you for your reply. I pasted each block of code into the appropriate area as you said, but unfortunately I am not seeing any changes. Any idea what I could be doing wrong? Thank you again!

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.