Hubspot JQuery to add active class not working

Question

I am trying to create a Hubspot custom menu module with an "active" class, but it does not work when I am using URL as href. When I click on the link, the page refresh and the "active" class does not change. As I am using HUBL+HTML I am not sure whether I am doing it correctly

 <script type="text/javascript"> $('.listing-menu a').on('click', function() { var h = $(this); h.parents('.listing-menu').find('li').removeClass('active'); h.parentsUntil('.additional-menu', 'li').addClass('active'); }) </script> 

 .listing-menu-item { width: fit-content; float: left; padding: 20px 25px; } a#listing-menu-items { text-decoration: none; color: #93a1af; } .active { background: white; } .listing-page-menu li{list-style:none; display: inline;} 

  <div class="listing-page-menu" id="menu"> <ul class="listing-menu" id="listing-menus"> <li class="listing-menu-item active"><a id="listing-menu-items" href="/blog/"> <h5>Most Recent</h5></a></li> <li class="listing-menu-item"><a id="listing-menu-items" href="/blog/tag/tag1/"> <h5>Tag 1</h5></a></li> <li class="listing-menu-item"><a id="listing-menu-items" href="/blog/tag/tag2/"> <h5>Tag 2</h5></a></li> <li class="listing-menu-item"><a id="listing-menu-items" href="/blog/tag/tag3/"><h5>Tag 3</h5></a></li> <li class="listing-menu-item"><a id="listing-menu-items" href="/blog/tag/tag4/"> <h5>Tag 4</h5></a></li> <li class="listing-menu-item"><a id="listing-menu-items" href="/blog/tag/tag5/"> <h5>Tag 5</h5></a></li> </ul> </div> 

Answer 1

Check this code:

{% for item in my_topics %}
    <li>
       <a class="{% if item.slug == topic %} active {% endif %}" href="{{ blog_tag_url(group.id, item.slug) }}">{{ item }} </a>
    </li>
{% endfor %}

Hope It helps. Happy to help.