Problema com código simples Jquery

[PetrusHenrique 5]

Bom dia, amigos

 

Não domino javascript e muito menos jQuery, sei muito básico os dois de tanto ler e reler códigos de plugins que coloco nos sites de meus clientes.

 

Então estou com a seguinte dificuldade: estou tentando fazer um simples efeito de mudança de cor em um menu ativo, já fiz em outros sites mas este não estou conseguindo de jeito nenhum. Estou utilizando o isotope para fazer um filtro e preciso adicionar um "active" neste filtro quando clicado.

 

Vejam o código

 

Script:

<script src="js/isotope.pkgd.min.js"></script><script>$( document ).ready( function() {	  	$('.produtos').isotope({			itemSelector: '.produto',			layoutMode: 'fitRows',		});		$('#filtro-produtos').on( 'click', 'a', function() {				var filterValue = $( this ).attr('data-filter');				$('.produtos').isotope({					filter: filterValue,				});  		});		});</script><script>$('#filtro-produtos a').click(function(){		if ($(this).hasClass('active')) {			$(this).removeClass('active');		} else {			$('a.active').removeClass('active');			$(this).addClass('active');		}});		</script>

HTML

     <div id="filtro-produtos">     	<a class="" data-filter="*">Todos</a>        <a class="" data-filter=".filter-desinfetantes">Desinfetantes</a>        <a class="" data-filter=".filter-aromatizantes">Aromatizantes</a>        <a class="active" data-filter=".filter-limpeza-geral">Limpeza Geral</a>        <a class="" data-filter=".filter-tratamento-de-pisos">Tratamento de Pisos</a>        <a class="" data-filter=".filter-higiene-pessoal">Higiene Pessoal</a>     </div>

LESS

#filtro-produtos{	.container;	text-align:center!important;	a{		text-transform:uppercase;		font-family: 'Source Sans Pro', sans-serif;		color:#FFF;		background:@VerdePrimario;		display:inline-block;		text-align:center;		.make-xs-column(12);		.make-sm-column(4);		.make-md-column(3);		float:none!important;		padding-top:15px;		padding-bottom:15px;		margin:10px 20px 0 0;		font-size:18px;		.transition(.2s);				&:hover, &:focus, &:active, &.active{			text-decoration:none;			background:@VerdeSecundario;			}		&:hover{			cursor:pointer!important; 			}	}	}

Só que não funciona. A primeira parte do script que diz respeito ao isotope funciona perfeitamente, mas a segunda que diz respeito a adição da classe active não funciona de jeito nenhum. ¬¬

 

Alguém pode me ajudar?

[PetrusHenrique 5]

Consegui resolver. A única coisa que fiz foi pegar o código e colocar antes do fechamento da tag body no fim do site. Estava no começo, dai não sei pq não funcionava.