1

Tenho o código a seguir, onde meu intento é que onde na classe .breadcrumb a aparecer o termo "bíblicas", esta classe tenha seu estilo alterado apenas onde a resolução for menor que 320px, mas até o momento não funcionou. O que pode estar errado, galera? Grato desde já!

<script>
if ($(window).width() &lt; 320) {$(".breadcrumb a:contains('bíblicas')").css("background-color", "green");}
</script>
2
  • 1
    Vamos depurar, isso da algum retorno?: $(".breadcrumb a:contains('bíblicas')") 18/04/2018 às 14:58
  • @DavidDias, utilizei a sugestão do Hugo e funcionou, cara! Obrigado pela gentileza e pelo comentário! Deus abençoe! =]
    – winiercape
    19/04/2018 às 12:49

1 Resposta 1

1

Não vejo porque usar jQuery para fazer isso se só com CSS vc resolveria.

Mas dessa forma vc consegue consegue o que quer usando o jQuery.

Opção 1

$(window).resize(function(){     
    if ($('body').width() <= 320 ){
        $('a[href*="biblicas"]').css("background-color", "green");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <a href="https://code.jquery.com/jquery-3.2.1.slim.min.biblicas.js">https://code.jquery.com/jquery-3.2.1.slim.min.biblicas.js</a>


Opção 2

$('body').append("<style type='text/css'>@media screen and (max-width: 320px) { a[href*='biblicas'] { background-color: green; } }</style>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="https://code.jquery.com/jquery-3.2.1.slim.min.biblicas.js">https://code.jquery.com/jquery-3.2.1.slim.min.biblicas.js</a>

3
  • Hugo, obrigado pela resposta! Utilizei a opção 2, apenas com CSS consegui o que queria. Me abriu a mente conhecer este seletor: w3schools.com/cssref/sel_attr_contain.asp Deus abençoe, cara!
    – winiercape
    19/04/2018 às 12:48
  • .append salvando o dia rss. Boa sorte com o projeto! Sobre o CSS procure no google por Attribute Css que vc vai achar algum material de estudo
    – hugocsl
    19/04/2018 às 12:50
  • Obrigado, cara! Ei-lo: einconformado.blogspot.com
    – winiercape
    19/04/2018 às 14:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .