jcny85 Posted January 25 Posted January 25 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!
Solution jpeter Posted January 25 Solution Posted January 25 @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!
jcny85 Posted January 25 Author Posted January 25 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!
jcny85 Posted January 25 Author Posted January 25 @jpeteractually -- i take that back -- I just needed to add the <script> tags around the code you sent. Thank you so much! Works great! jpeter 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment