ilustrar:
Clique em um parágrafo de texto e altere o texto para vermelho. Depois de clicar novamente, o texto voltará ao preto.
A cópia do código é a seguinte:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> teste jQuery </ititle>
<script src = "jQuery-1.11.1.min.js"> </script>
<style type = "text/css">
.vermelho
{
Cor: vermelho;
}
</style>
</head>
<Body>
<p> Aprender é como navegar contra a corrente, se você não avançar, você recuará </p>
<p> Aprender é como navegar contra a corrente, se você não avançar, você recuará </p>
<p> Aprender é como navegar contra a corrente, se você não avançar, você recuará </p>
<p> Aprender é como navegar contra a corrente, se você não avançar, você recuará </p>
<script type = "text/javascript">
$ ("P"). Clique (function () {
if ($ (this) .hasclass ("vermelho")) {// julga se tem esta classe
$ (this) .RemoveClass ("vermelho");
}outro{
$ (this) .Addclass ("vermelho");
}
})
</script>
</body>
</html>
Como este é um processo de classes alternadas, você pode usar o método TogGleClass. Se a classe correspondente: "Vermelho" existir, ela será removida. Se não existir, será adicionado.
A cópia do código é a seguinte:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> teste jQuery </ititle>
<script src = "jQuery-1.11.1.min.js"> </script>
<style type = "text/css">
.vermelho
{
Cor: vermelho;
}
</style>
</head>
<Body>
<p> Aprender é como navegar contra a corrente, se você não avançar, você recuará </p>
<p> Aprender é como navegar contra a corrente, se você não avançar, você recuará </p>
<p> Aprender é como navegar contra a corrente, se você não avançar, você recuará </p>
<p> Aprender é como navegar contra a corrente, se você não avançar, você recuará </p>
<script type = "text/javascript">
$ ("P"). Clique (function () {
$ (this) .toggleClass ("vermelho");
})
</script>
</body>
</html>