用jQuery点击后保持css活动状态

我在使用psuedo类，但我很难弄清楚如何使用jquery与它们进行交互。我认为这就像为一件物品添加一个类，但如果你看看我的例子，我不知道如何去做这件事。我做了一些搜索，也许我只是看错了方式。用jQuery点击后保持css活动状态

当一个按钮（<span>）被点击它改变使用：积极，：之前，主动::前等

我想要那个按钮，单击保持下来后推。（直到另一个<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。我已将其修改为我的配色方案

来源

2012-10-18 Nicholas Decker

您可以通过添加/删除类的做到这一点。看看toggleClass（）http://api.jquery.com/toggleClass/ –

我知道更改类，但使用：之前/之后的东西是我追求的扳手。 –

我不明白downvote。我在点击一个区域后询问是否保持css状态为活动状态，然后当点击另一个区域时我可以释放状态。这不是一个简单的开关类。 –

使用jQuery切换类会更好。活动的伪类不适用于这种类型的功能。

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

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

鉴于上面的代码片段，应用适当的样式定义的类active。

来源

2012-10-18 17:12:57 xandercoded

我知道这是一种解决方法，切换类似的类。有没有办法保持：鼠标点击活动状态？ –

不，只有CSS，没有。 – xandercoded

既然你想要的样式坚持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/

来源

2012-10-18 17:16:12 Gromer

我明白这一点，但我不想改变这样的类。我试图保持它：活跃的状态。你懂我的意思吗？ –

我知道你的意思，我只是不确定是否可以完成。 – Gromer

用jQuery点击后保持css活动状态

回答

相关问题