Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
921 views
in Technique[技术] by (71.8m points)

javascript - Keep button in active state until clicked upon again

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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 ;)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...