Exemplo
Alternar entre adicionar e remover o "main" nome da classe para todos <p> elementos:
$("button").click(function(){
$("p").toggleClass("main");
});
Tente você mesmo " Definição e Uso
O toggleClass() método alterna entre adicionar e remover um ou mais nomes de classes a partir dos elementos selecionados.
Este método verifica cada elemento para os nomes de classe especificados. Os nomes de classe são adicionados se ausente, e removido se já definido - Isto cria um efeito de alavanca.
No entanto, usando o parâmetro "switch", você pode especificar para remover apenas, ou apenas acrescentar um nome de classe.
Sintaxe
$(selector).toggleClass(classname,function(index,currentclass),switch)| Parâmetro | Descrição |
|---|---|
| classname | Requeridos. Especifica um ou mais nomes de classe para adicionar ou remover. Para especificar várias classes, separe os nomes de classe com um espaço |
| function(index,currentclass) | Opcional. Especifica uma função que retorna um ou mais nomes de classe para adicionar / remover
|
| interruptor | Opcional. Um valor booleano que especifica se a classe só deve ser adicionado (true) ou somente ser removido (false) |
Tente você mesmo - Exemplos
Alternar entre adição e remoção de um nome de classe
Como usar o toggleClass() método para alternar entre adição e remoção de um nome de classe.
Aulas de alternância usando uma função
Usando uma função para especificar quais nomes de classe deve ser alternado para os elementos selecionados.
Usando o parâmetro de opção
Como usar o parâmetro de opção apenas para adicionar ou remover um nome da classe.