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

我做了两个框，在悬停状态和活动状态下背景会改变。以下是我的作品：

在那里，当我单击“一”时，它将设置为活动状态（绿色背景）。那很好。当我点击“两个”时，它将被设置为活动状态，“一个”将返回到它以前的状态（灰色背景）。那对我也很好

但是，我想当“一”被设置为活动状态时，如果我点击“一”，它也会回到正常状态（灰色背景）。类似的事件也应该发生在“两人”身上。我怎么做这个

我的应用脚本：

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

更新……….

奎师那帮了我这个忙：

我注意到一个问题，应该为我的项目更新。这个问题是：如果“一”处于“活动”状态，在那个时候，如果任何用户单击“一”，它将返回到其原始状态。但是，若用户不从那个按钮上移除他/她的鼠标指针，那个按钮看起来也在绿色背景上。这是悬停颜色。因此，如果任何用户反复单击某个按钮，除非他/她移动指针，否则他/她将无法理解该按钮的状态是否已更改

所以，我需要（当用户不移动鼠标指针时）：如果有人点击“一”按钮，它就会变成“绿色背景”。若用户再次点击“一”，它将变成“灰色背景”（为了理解用户不必移动鼠标指针）。简而言之，如果用户在不移动鼠标指针的情况下反复单击按钮，则悬停颜色应处于非活动状态

编辑：

我喜欢@Roko C.Buljan对CSS的触摸，以区分悬停和点击（在评论中）

---

这很好，但当“一”处于活动状态时，如果我单击“一”，它将返回到以前的状态。但如果我不从“一”中删除鼠标指针，那么在删除“活动”类之后，鼠标指针看起来也是绿色的。这是因为对于悬停颜色。所以，问题是：如果一个普通用户一次又一次地点击“一”按钮，他将无法理解该按钮是否设置为非活动，除非他/她不会从该按钮上移除鼠标指针。那么，当“活动”移除且鼠标指针仍在该按钮上时，如何移除悬停颜色then@user1896653为了更好的用户界面（用户界面）您应该为悬停使用稍微不同的色调state@user1896653-我同意Roko C.Buljan。。您必须使用稍微浅一点的颜色来表示悬停。@user1896653请听我们的建议（我们在这方面非常有经验）不要使用与活动颜色相同的悬停状态颜色！：）我可能会在我的建议中添加更多内容，但我没有得到的是：您有更多的灰色或悬停活动颜色？我的意思是你的按钮默认都是灰色的吗？克里希纳的回答只是使用了一种稍微不同的CSS方法。悬停效果应该和现实世界中的一样，以获得更好的用户体验。例如：假设我们有一个真正的按钮，当我们按下它时，它会发光，通过悬停按钮它通常不会打开，而是会改变不透明度或只是颜色级别。在创建交互式web按钮时，应保持相同的方法。一旦你点击它。。。让它发光！是的，你的用户体验观点是对的。但是，我在我真正的项目中并没有那个按钮。在我真正的项目中，我有一个勾号，一个十字号，一个编辑号。一开始，它们就像是非活动状态（现实世界中的非活动灰色）。当用户单击该标志时，它将变为活动状态。通过将鼠标悬停在他们身上，可以向他们发送一条消息，您只能通过单击该消息使其处于活动状态。这就是为什么，悬停和活动颜色是一样的，这正是我的观点。如果你保持鼠标悬停并单击“状态”相同的颜色，你将陷入用户双击按钮的陷阱，这将是一种糟糕的体验。我的观点是，通过ie：悬停，使它只是稍微改变一个颜色级别。你不能随它去。在任何情况下，移动用户几乎看不到悬停状态，除非点击并按住按钮：）用户知道，在点击按钮后，他们可以将手指拖开以不激活按钮，但如果您点亮该按钮。。。你只会吓到你的用户：）

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

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

.toggle:hover {
    background: #888;
}

.toggle.active{
    background: green;
}