激活按钮时更改其CSS

Question

我想在其激活时更改元素btn1（其按钮）的CSS。 只要显示“故事”，我想看起来就不同（按下显示div时，只要显示了div，我希望按钮具有与普通CSS不同的颜色）

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

Answer 1

$('#btn1').on('click', function() {
 $(this).toggleClass('active'); // add/remove a css class
 $('#story').fadeToggle(400);
}); 

在你的CSS添加

.active{
// styles you wish to apply
}

Answer 2

:active选择器https://developer.mozilla.org/zh-CN/docs/Web/CSS/:active

并在此网站上查看http://www.paulund.co.uk/css3-buttons-with-pseudo-classes

Answer 3

尝试.css()方法：

$('#btn1').on('click', function() {
    $(this).css({'border':'1px solid blue', 'color':'red'});
    $('#story').fadeToggle(400);
});

工作实例

Answer 4

听起来您想这样做：

$(function() {
    $('#btn1').on('click', function() {
        $(this).css('background-color','red'); // or whatever
        $('#story').fadeToggle(400, function() { // 'complete' callback function
            $('#btn1').css('background-color','white');
        });
    }); 
});