 |
|
||||
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: 9256 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:
<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: <p id="parag" class="destaque">Sou um parágrafo</p> E finalmente o código JavaScript (na parte <head></head> da página):
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#parag").click(function(){
$(this).toggleClass("destaque2");
});
});
//-->
</script>
E aqui a página HTML completa para o exemplo:
<!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 |
|
Java - Como remover um elemento de uma determinada posição do ArrayList do Java usando o método remove() |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
