更改为默认样式

Question

此代码后，按钮的css仍然更改。我想回到正常的css，当按钮不活动时。

的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); 
}); 

一些CSS：

.active { 
    color:#f00; 
} 

工作小提琴：http://jsfiddle.net/7LaeB/

Answer 2

创建所需的更改CSS类和活跃的时候运用它和不活动时将其删除。例如：

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

为什么不加类到该按钮？

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