 |
|
||||
Você está aqui: jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML |
Como alternar a classe de um elemento HTML usando a função toggleClass() do jQueryQuantidade de visualizações: 8955 vezes |
|
O método toggleClass() do jQuery é um dos mais interessantes no framework. Este método permite aplicar um nome de classe a um elemento HTML se ele ainda não estiver definido e removê-lo se este já estiver definido para o elemento. Veja um trecho de código que altera a cor de fundo de um parágrafo a cada vez que ele é clicado. Comece analisando o trecho de estilos CSS: ----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)
Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<style type="text/css">
body, td {font: 70% Verdana}
.destaque {background-color: yellow}
.destaque2 {background-color: red}
</style>
Veja agora o elemento P que usaremos para ilustrar o efeito: ---------------------------------------------------------------------- Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar) Este código foi útil? Paga um cafezinho pra mim :-( PIX: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <p id="parag" class="destaque">Sou um parágrafo</p> E finalmente o código JavaScript (na parte <head></head> da página): ----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)
Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#parag").click(function(){
$(this).toggleClass("destaque2");
});
});
//-->
</script>
E aqui a página HTML completa para o exemplo: ----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)
Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Estudos jQuery</title>
<style type="text/css">
body, td {font: 70% Verdana}
.destaque {background-color: yellow}
.destaque2 {background-color: red}
</style>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
</head>
<body>
<p id="parag" class="destaque">Sou um parágrafo</p>
<script type="text/javascript">
$(document).ready(function(){
$("#parag").click(function(){
$(this).toggleClass("destaque2");
});
});
</script>
</body>
</html>
O método toggleClass() retorna um objeto jQuery para fins de encadeamento de chamadas de métodos. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de jQuery |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
