Passage au style par défaut

Question

Après ce code, le css du bouton est toujours modifié. Je veux revenir à la normale css, quand le bouton n'est pas actif.

JavaScript

$('#btn1').on('click', function() { 
    $("#btn1").css({color:'red'}) 
    $('#story').fadeToggle(400); 
}); 

HTML

<div id="story" style="display:none;"> 
    My div 
</div> 

<input id="btn1" type="button" value="Click Here" /> 

Answer 1

HTML:

<div id="story" style="display:none;">My div</div> 
<input id="btn1" type="button" value="Click Here" /> 

jQuery:

$('#btn1').on('click', function() { 
    $(this).toggleClass('active'); 
    $('#story').fadeToggle(400); 
}); 

Certains CSS:

.active { 
    color:#f00; 
} 

travail Fiddle: http://jsfiddle.net/7LaeB/

Answer 2

Créer une classe CSS avec les changements que vous voulez et l'appliquer quand il est actif et le retirer lorsqu'il est inactif. Par exemple:

JS:

$('#btn1').on('click', function() { 
    $(this).addClass('active') 
    $('#story').fadeToggle(400) 
}); 

//then when the button is 'inactive' run removeClass('active') 

CSS:

.active{color:red;} 

Answer 3

Pourquoi ne pas ajouter la classe à ce bouton?

$('#btn1').on('click', function(){ 
    $(this).toggleClass('active'); // If has class, removes it, otherwise, it adds that class 
    $('#story').fadeToggle(400); 
});