如何通过鼠标单击删除活动类

I've made two box which background will be changed at hover and active state. Here is my work: http://jsfiddle.net/3Vbz8/

我制作了两个盒子,其背景将在悬停和活动状态下更改。这是我的工作:http://jsfiddle.net/3Vbz8/

At there, when I click "one" it'll set to it's active state(Green Background). That's fine. When I click "Two", it'll set to active state and "one" will return to it's previous state(Grey Background). That's also fine to me.

在那里,当我点击“one”时,它将设置为它的活动状态(绿色背景)。没关系。当我点击“Two”时,它将设置为活动状态,“one”将返回到之前的状态(灰色背景)。这对我也没关系。

But, I want when "one" is set to active state, at that time, if I click on "One", it'll return back to it's normal state(grey background) too. Similar event should be happen for "Two" too. How can I make this?

但是,我希望当“one”设置为活动状态时,那时,如果我点击“One”,它也将返回到它的正常状态(灰色背景)。同样的事件也应该发生在“两个”。我该怎么做?

My applied script:

我的应用脚本:

$('.toggle').click(function(){
   $('.toggle').removeClass("active");
   $(this).toggleClass("active");
});

...........UPDATE...........

Krishna helped me with this: http://jsfiddle.net/3Vbz8/1/

克里希纳帮我这个:http://jsfiddle.net/3Vbz8/1/

$('.toggle').click(function(){
   $('.toggle').not(this).removeClass("active");
   $(this).toggleClass("active");
});

I've noticed a issue which should be updated for my project. That issue is: if "one" is on "active" state, at that time, if any user click on "One", it'll return back to it's original state. But, if user don't remove his/her mouse pointer from that button, that button seemed on green background too. That's for hover color. So, if any user click again and again on a button he/she won't understand that's state is changed or not unless he/she moved his/her pointer.

我注意到了一个应该为我的项目更新的问题。那个问题是:如果“一个”处于“活动”状态,那么,如果任何用户点击“一个”,它将返回到它的原始状态。但是,如果用户不从该按钮移除他/她的鼠标指针,该按钮似乎也在绿色背景上。这是悬停颜色。因此,如果任何用户一次又一次地点击按钮,他/她将不会理解状态是否改变,除非他/她移动他/她的指针。

so, I need(when mouse pointer isn't moving by user): if anyone click on "One" button, it turn's into "Green background". If user click on "One" again, it'll turn to "Grey Background" (for understanding that change user don't have to move his/her mouse pointer). In short hover color should be inactive if user click on a button again and again without moving his/her mouse pointer

所以,我需要(当鼠标指针没有被用户移动时):如果有人点击“一个”按钮,它会变成“绿色背景”。如果用户再次点击“One”,它将变为“灰色背景”(了解更改用户不必移动他/她的鼠标指针)。如果用户一次又一次地点击按钮而不移动他/她的鼠标指针,则简短的悬停颜色应该是不活动的

1 个解决方案

#1

Use not(this) Documentation

不要使用(this)文档

http://jsfiddle.net/3Vbz8/1/

$('.toggle').click(function(){
   $('.toggle').not(this).removeClass("active");
   $(this).toggleClass("active");
});

Edit:

I liked @Roko C.Buljan's touch to the CSS to differentiate hover vs click(in comments)

我喜欢@Roko C.Buljan对CSS的触摸来区分悬停与点击(在评论中)

http://jsfiddle.net/3Vbz8/8

.toggle:hover {
    background: #888;
}

.toggle.active{
    background: green;
}

#1