javascript - 保持 CSS 元素处于活动状态

Question

单击它后，我需要一个按钮保持活动状态（不透明度已更改）。如何使用 CSS 做到这一点？我已经尝试过 :active 和 :enabled 类，但它们不起作用。

欣赏一个可行的解决方案。

如果在 CSS 中不可能，有人可以帮我在 jquery 中进行切换吗？

Answer 1

我认为纯 CSS 不可能。

这是 jQuery 和 CSS 的示例：http: //jsfiddle.net/hrPcU/

$('#btn').on('click', function(e){
    //Toggle:
    $(this).toggleClass('active');
    //Activate just once:
    //$(this).addClass('active');
});​

---

编辑（->评论）：

如果您想在单击按钮外的任何位置时切换回课程，请尝试以下操作：http: //jsfiddle.net/hrPcU/1/

$(document).on('click', function(e){
    //Check if the event was fired from the button
    if($(e.target).attr('id') != 'btn'){
        $('#btn').removeClass('active');
    }else{
        $('#btn').toggleClass('active');  
    }
});

​</p>

Answer 2

• 创建一个与您的样式相似的 CSS 类:active
• 向该元素添加点击处理程序
• 在该处理程序中，使用addClass

这是概念代码：

a:active,   /*native active pseudo-class*/
a.active {  /*your make-shift active class*/
    /*styles*/
}

$('a').on('click',function(){
    $(this).addClass('active');
});

Answer 3

尝试使用：http ://www.w3.org/TR/css3-selectors/#target-pseudo

示例：http ://webdesignernotebook.com/examples/target.html