0

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

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

我希望该按钮在按下后保持单击状态。（直到另一个<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 的方法是什么？

单击按钮，按钮看起来被按下。我想在鼠标释放后保持该状态 - 直到下一个被按下。

注意：我在网上找到了这个按钮并复制了 css。我已将其修改为我的配色方案

4

2 回答 2

2

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

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

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

给定前面的代码片段，将适当的样式定义应用于 class active。

于 2012-10-18T17:12:57.740 回答
1

由于您希望样式保持不变，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-18T17:16:12.747 回答