Question

我正在使用psuedo类，我无法弄清楚如何使用jquery与它们进行交互。我认为这就像在一个项目中添加一个类，但如果你看一下我的例子，我不知道该怎么做。我做了一些搜索，也许我只是以错误的方式看待它。

当点击一个按钮（<span>）时，它会改变：active，：before，active :: before etc。

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

    .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进行此操作的方法是什么？

Click on Button, button looks pressed. I would like to keep that state active after mouse release - and until the next one is pushed.

注意：我在线获取此按钮并复制了CSS。我已将其修改为我的配色方案

Answer 1

使用jQuery切换类可以更好地处理它。活动伪类不适用于此类功能。

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

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

根据前面的代码段，将适当的样式定义应用于类active。

Answer 2

由于您希望样式坚持span，直到另一个span被点击，我建议为span创建一个具有活动时所需样式的类，然后是span未激活时的默认类。

我假设我们在这里有两个课程，active-span和default-span。你似乎知道你的css，所以你可以定义它们。

jQuery的：

$('span').click(function() {
    $('span').removeClass('active-span');
    $(this).addClass('active-span');
});

小提琴：http://jsfiddle.net/gromer/ZX7yg/

单击jQuery后保持css活动状态

2 个答案: