"How to ensure the corresponding tab is active when visiting a CMS page?" - Seeking advice on a script to set the active tab based on item color

Hello everyone!

I am currently in the process of creating a website using CMS collections. The collection consists of 5 items that are grouped by colors. To display these items on the homepage, I have added tabs, so when you click on the red tab, only the red items will appear and so on.

However, I have a question regarding the behavior of the tabs. When a user clicks on an item on the homepage and goes to the CMS page about that specific item, how can I make sure that the tab corresponding to the color of that item is automatically selected?

I’ve been working on a script that would set the active tab to red when a user clicks on a specific link related to a red item. However, I’m struggling with making this script work consistently across all pages of the website. Can you please provide any guidance or suggestions on how to accomplish this? Script in home page Before tag section

Any guidance on this matter would be greatly appreciated.

p.s. yellow box only for testing purposes.

Here is my site Read-Only: [LINK(Webflow - Smile-cms)]
(how to share your site Read-Only link)