Hubspot JQuery 添加活动类不起作用答案

【问题标题】：Hubspot JQuery to add active class not workingHubspot JQuery 添加活动类不起作用
【发布时间】：2018-07-30 10:14:31
【问题描述】：

我正在尝试创建一个带有“活动”类的 Hubspot 自定义菜单模块，但是当我使用 URL 作为 href 时它不起作用。当我单击链接时，页面刷新并且“活动”类不会改变。由于我使用的是 HUBL+HTML，我不确定自己是否正确

<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>

【问题讨论】：

页面是否重新加载？这就是jquery不起作用的原因......当它开始让jquery思考时，页面重新加载并使用相同的活动按钮（html）加载另一个页面
是的，页面确实重新加载了。并且由于活动类已经设置为第一个菜单项。它没有改变！
和页面共享菜单对吗？你没有做任何事的jquery，因为它触发点击菜单> a，但在按下链接时会自动刷新。因此，唯一的解决方案是在每个加载的页面内激活。
是的，菜单在页面内共享。这里的问题是只有一个列表页面。其余页面用作 Hubspot 中的标签过滤器。没有单独的页面部分。通用页面模板只有一个。
对我来说唯一的解决方案是使用 javascript/jquery 检查 url 并查看 tag1 是否激活 menu1，如果 tag2 则激活 menu2 ...然后。

标签： jquery html hubspot

【解决方案1】：

检查此代码：

{% 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 %}

希望对您有所帮助。乐于助人。

【讨论】：