使用jQuery单击后保持css活动状态 [英] Keep css active state after click with jQuery

问题描述

我使用psuedo类，我无法弄清楚如何使用jquery与他们交互。我认为它就像给一个项目添加一个类，但如果你看看我的例子，我不知道如何去这个。

I'm using psuedo classes and I'm having trouble figuring out how to interact with them using jquery. I would think it's just like adding a class to an item, but if you look in my example, I'm not sure how to go about this. I've done some searching, and maybe I'm just looking at it the wrong way.

当一个按钮（< span> ）被点击它改变使用：active，：before，active :: before等。

When a button(<span>) is clicked it changes using :active, :before, active::before etc.

我希望该按钮在按下后保持点击。 （直到另一个< span> 被点击）

I want that button to stay clicked down after pushed. (until another <span> is clicked on)

    .lbButton { background-color:#eaa33d; font-family: 'Open Sans', sans-serif; font-size:18px; text-decoration:none; color:#000; position:relative; padding:10px 20px; padding-right:50px; background-image: url('../images/nav_background1.png'); border-radius: 5px; box-shadow: inset 0px 1px 0px #ede8ba, 0px 5px 0px 0px #ab6c11, 0px 10px 5px #999; margin-left: 30px;cursor: pointer; }
    .lbButton:active {  top:3px;  box-shadow: inset 0px 1px 0px #ede8ba, 0px 2px 0px 0px #ab6c11, 0px 5px 3px #999; }
    .lbButton::before { background-color:#4e3108; background-image:url(http://heritageinncharlottesville.com/images/down_arrow.png); background-repeat:no-repeat; background-position:center center; content:""; width:20px; height:20px; position:absolute; right:15px; top:50%; margin-top:-9px; border-radius: 50%; box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066; }
    .lbButton:active::before { top:50%; margin-top:-12px; box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29; }

使用jQuery的方式是什么？

What is the way to go about this using jQuery?

点击按钮，按钮看起来很紧。

注意：我在这个按钮上网，并且在下一个按钮被按下后，复制css。我已经修改它到我的配色方案

推荐答案

这将是更好的处理与jQuery切换类。活动伪类不适用于此类功能。

It'd be better handled with jQuery toggling classes. The active pseudo-class wasn't meant for this type of functionality.

var spans = $('span.lbButton');

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

/ code>。

这篇关于使用jQuery单击后保持css活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！