保持按钮处于活动状态,直到再次单击为止

Question

我觉得我有一个相对简单的问题,我不知道该怎么做.我有一个按钮类型的html输入标签,它调用了一个javascript onclick函数.这部分工作正常,但我希望能够添加到我的onClick功能,使按钮保持活动状态的能力(以便它保持突出显示,直到再次点击).

有任何想法吗？我试着把注意力集中在它上面,但我认为它不可能有多个按钮焦点,这听起来真的像黑客.

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/

照顾自己 ;)