Home Newest Hot Active Unanswered Views Votes Tags Rank
 
Anderson

Adicionando e Removendo Classes - jQuery


Não precisamos nos limitar a adicionar e remover elementos inteiros — podemos ajustar nossos superpoderes jQuery para alterar classes, CSS, e mesmo o conteúdo dos nossos elementos HTML.

Vamos começar com as classes. A jQuery inclui duas classes, .addClass() e .removeClass(), que podem ser usadas para adicionar ou remover uma classe de um elemento. Isso é maravilhoso se, por exemplo, você tem uma classe destacada highlighted que você quer aplicar a um elemento quando ele for clicado.

A sintaxe é algo como:


$('selector').addClass('className');
$('selector').removeClass('className');


onde 'selector' é o elemento HTML que você quer e 'className' é o nome da classe que você quer adicionar ou remover.

Lembre-se: Você não está selecionando coisa alguma, você está modificando seu elemento. Isso significa que você não precisa de # ou . antes da classe.

HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="title" class="highlighted">I'm highlighted!</div>
<div id="text">Highlight me, too!</div>  
</body>
</html>

CSS

#title {
    background-color: #C02942;
    border-radius: 5px;
    text-align: center;
    font-family: Verdana, Arial, Sans-Serif;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}
#text {
    background-color: #0B486B;
    border-radius: 5px;
    text-align: center;
    font-family: Vivaldi, Cursive;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}
.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}

JavaScript

$(document).ready(function(){ 
$('#text').click(function(){
$(this).addClass('highlighted');
});
});

Demo: http://jsfiddle.net/0ma7nkkL/4/


GuruQA
GuruQA
 
 
Anderson

Mantendo a classe - HTML e CSS

LuanVidal

Mod Cod_mw3 Para cs 1.6 Em Portugues

Anderson

Adicionando arquivo CSS no HTML

Anderson

Como as Classes nos Ajudam? - JavaScript

Anderson

id e class - HTML e CSS

GK

Como deve ser o tratamento da aids?

GK

Quando se formar oxidação (um pó branco e esverdeado, tipo mofo), nos terminais da bateria, você limpa com?

Anderson

Adicionando idiomas no seu plugin - AMXX

Anderson

Adicionando Autor no NV recent topics - phpBB3

Anderson

Mergulhando nas instruções Switch - PHP