保持按钮处于活动状态，直到再次点击。

Question

我有一个相对简单的问题，但不确定如何解决。我有一个html input标签，类型为button，调用一个javascript onclick函数。这部分工作得很好，但是我想在我的onClick函数中添加一些功能，使按钮保持活动状态（即保持高亮，直到再次点击）。有什么想法吗？我尝试保持它的焦点，但我认为无法拥有多个按钮焦点，这听起来像一个hack。

- AIntel

---

你能提供一些你已经尝试过的代码吗？ - Anthony

Answer 1

由于您没有给出代码，我将为您提供一个例子，并希望这是您所需要的：

假设这是您的 HTML 按钮：

<div class="button ">My button</div>

让我们为它添加一些样式

.button { 
float:left;
color: #333;
width: auto;
text-align: center;
padding: 0 10px;
background: #f0f0f0;
line-height: 1.5em;
height: auto;
}

现在让我们来为你的活动按钮添加样式

.button.active {
background: #ea0000;
color: #fff;
}

现在你需要做的就是编写一个小的jQuery函数：

<script>
$('.button').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }
});
</script>

你来啦 ;-)

这里是我的一个示例: http://jsfiddle.net/S7kJ2/

注意保重 ;)

- Vassilis Pits

Answer 2

你需要使用jQuery的toggleclass功能。

<input type='button' onClick="jQuery(this).toggleClass('active')">

在jsfiddle上检查工作代码

- Santosh Yadav

Answer 3

看起来你需要切换功能。

请尝试使用jQuery toggleClass()函数：http://api.jquery.com/toggleclass/

- svlada