Problema com código simples Jquery
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?
Discussão (1)
Carregando comentários...