保持按钮处于活动状态直到再次点击 [英] Keep button in active state until clicked upon again

问题描述

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

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

解决方案

因为你没有代码，我给你一个例子，我希望你有你想要的:

假设这是您的 HTML 按钮:

我的按钮

让我们给它一些样式

.button {向左飘浮;颜色:#333；宽度:自动；文本对齐:居中；填充:0 10px；背景:#f0f0f0；行高:1.5em；高度:自动；}

让我们为您的活动按钮设置样式

.button.active {背景:#ea0000；颜色:#fff;}

现在你要做的就是写一个小的jquery函数:

你来了;-)

这也是我的小提琴示例:http://jsfiddle.net/S7kJ2/

保重;)

I feel like I have a relatively simple question that I'm just not sure how to go about doing. I have an html input tag of button type which calls a javascript onclick function. This part works fine, however I want to be able to add to my onClick function, the ability to keep the button in the active state (so that it remains highlighted until clicked upon again).

Any ideas? I tried keeping the focus on it instead, but I don't think its possible to have multiple button focuses, and that really just sounds like a hack.

解决方案

As you have no code i am giving you an example and i hope you have that you want:

Let's say this is your HTML button:

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

Let's give it some styling

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

And let's style your active button

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

Now that you have to do is to write a small jquery function:

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

And here you are ;-)

Heres my example on fiddle also: http://jsfiddle.net/S7kJ2/

Take care ;)

这篇关于保持按钮处于活动状态直到再次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！