0

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>
Sooraj Kabeer
  • 1
  • 1
  • Did the pages reload? that's why jquery don't work... when it start to make jquery thinks, the page reload and load another page with the same active button (html) – Roy Bogado Jul 30 '18 at 10:25
  • Yah the page did reload. And as the active class is already set to the first menu item. It is not changing! – Sooraj Kabeer Jul 30 '18 at 10:41
  • And pages share menu right? the jquery you have do nothing, because it trigger click on menu>a but automatically refresh when press link. So, the only solution is make active inside each page is loaded. – Roy Bogado Jul 30 '18 at 10:44
  • Yah the menu is shared within pages. The problem here is that there is only one Listing page. The rest of the pages are working as a filter of tags in Hubspot. There are no individual page sections. There is only one common page template. – Sooraj Kabeer Jul 30 '18 at 10:56
  • The only solution to me is check the url with javascript/jquery and see if tag1 active menu1, if tag2 then active menu2 ... and then. – Roy Bogado Jul 30 '18 at 10:57

1 Answers1

0

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.

Partho63
  • 3,117
  • 2
  • 21
  • 39
Inamulhasan
  • 1