All geek questions in one place

Button: active using JavaScript and CSS

Trying to get a simple button to be in an active, different style when pressed. I use HTML to place the button, CSS for styling and hope to use a bit of JavaScript for this.

Having looked around SO and found that there are many different ways, such as using Checkbox to create a button using pure CSS or jQuery or JavaScript, I find JavaScript to be the closest way I'm looking at.

HTML

<button type="button" class="btn" id="btn1">Details</button>

CSS

 .btn { background: #3498db; border-radius: 0px; font-family: Arial; color: #ffffff; font-size: 12px; padding: 2px 2px 2px 2px; text-decoration: none; height: 30px; width: 70px; margin-top: 5px; margin-bottom: 5px; display: block; } .btn:active { background: #cecece; text-decoration: none; }

Javascript

 $('.btn').click(function(){ if($(this).hasClass('active')){ $(this).removeClass('active') } else { $(this).addClass('active') } });

Here is the jsfiddle link: http://jsfiddle.net/w5h6rffo/

Additional note
The goal is to have several buttons with the same class, but each button calls up different functions. I have a call to functions that work, and not a button that is in the active state the first time I click, and then in the inactive state when I click it again

+5
source share
4 answers

You are close to doing it right, the mechanism you created by checking to see if your element has an active class, but jQuery has toggleClass() , which allows you to simply write the following:

 $('.btn').click(function() { $(this).toggleClass('active'); });

Then, in your CSS, instead of the psuedo :active style, you will use the class name instead:

 .btn.active { background: #cecece; text-decoration: none; }

You will also want to remove the :active selector from your CSS alltogether, since you won't need it anymore :)

As dfsq , it is indicated that there is a certain value when saving the selector :active psuedo:

I just think that the active state (: active) for the controls is important. For example, without it, the button will look the same if it is pressed, but not pressed (mouse to mouse). UX is slightly better with: active. But maybe I'm too picky

For this reason, you can change the selector as:

 .btn.active, .btn:active { background: #cecece; text-decoration: none; }

Since this will affect the state of .active and :active .

+6
source

You can use the List.toggle () class in conjunction with the active class.

So your code will look something like this:

 <!DOCTYPE HTML> <html> <head> <style> .btn { background: #3498db; border-radius: 0px; font-family: Arial; color: #ffffff; font-size: 12px; padding: 2px 2px 2px 2px; text-decoration: none; height: 30px; width: 70px; margin-top: 5px; margin-bottom: 5px; display: block; } .btn.active { background: #cecece; text-decoration: none; } </style> </head> <body> <button class="btn">Button</button> <button class="btn">Button</button> <button class="btn">Button</button> <button class="btn">Button</button> </body> <script> function toggleActiveState() { this.classList.toggle('active'); } var btns = document.querySelectorAll('.btn'); [].forEach.call(btns, function(btn) { btn.addEventListener('click', toggleActiveState, false); }); </script> </html>

This aproach will work for an infinite number of buttons.

+4
source

See https://developer.mozilla.org/en-US/docs/Web/CSS/:active . What is happening now is that it works fine :-), but what you ask for and what you want is not the same thing.

I think you need to fix your css and define active as a class, not a pseudo-class (untested, but here it goes):

 .active { background: #cecece; }
+3
source

You can use jQuery toggleClass (className) function.

http://api.jquery.com/toggleclass/

 <script> $("button.btn").click(function() { $(this).toggleClass("active"); }); </script> <style> .active{ // your active style } <style>
+1
source

Source: https://habr.com/ru/post/1237783/

More articles:


All Articles