1

I have 4 simple buttons. How could I set them up so when 1 of them is clicked it has some property which changes and stays changed? And when another of those buttons gets clicked it changes the same but it reverts the first button's property back to "normal"? Basically, they are navigation buttons and I would like them to show which part of page are you on. Thank you in advance.

3
  • @MahdiParsa Yes I can use jquery but don't know how to do this in it. I haven't tried much because I don't have a general idea how to do it. Dec 25, 2012 at 16:04
  • I hope we're talking about texty elements that are styled to look like buttons rather than actual form element buttons.
    – cimmanon
    Dec 25, 2012 at 16:05
  • @cimmanon No, these are real buttons unfortunately but not the form ones but normal <button> buttons Dec 25, 2012 at 16:07

3 Answers 3

2

I made a sample for click and change background color only:

CSS

.beforeClick {
    background-color:#EEE;
}

JavaScript

$(document).ready(function (){
   $('.beforeClick').click(function (){
       $('.beforeClick').css('background-color',"#EEE");
           $(this).css('background-color',"#555");
   });
});

HTML

<button class="beforeClick">btn1</button>
<button class="beforeClick">btn2</button>
<button class="beforeClick">btn3</button>
<button class="beforeClick">btn4</button>
<button class="beforeClick">btn5</button>

(you require jQuery)

Here is a DEMO

3
  • 3
    You make it sound like this can't possibly be done with vanilla JS.
    – cimmanon
    Dec 25, 2012 at 16:11
  • What would be the best way to "turn off" all other buttons so the only button that has a different background is the one that you click? If you click another the first one changes back to normal? Dec 25, 2012 at 16:15
  • yes ,I change background only you can use all api of jquery it is possible .
    – A1Gard
    Dec 25, 2012 at 16:17
2

Make use of classes to toggle your buttons' states. Something like:

<div class="button">PRESS</div>
....
<div class="button">PRESS</div>

would only need another class of .selected and you could already cover your scenario with a few lines of vanilla JavaScript:

var buttons = document.getElementsByClassName('button');

for (var i = 0; i < buttons.length; i++) { //loop through all buttons
    buttons[i].addEventListener('click', function() {
        if (document.getElementsByClassName('selected').length) { //check if we already have a selected element
            document.getElementsByClassName('selected')[0].className = document.getElementsByClassName('selected')[0].className.replace(/(?:^|\s)selected(?!\S)/g, ''); //remove selected class from "old" element
        }
        this.className += ' selected'; //add selected class to element that has been clicked / called the handler
    });
}​

See a working fiddle

0
1

What I would do is write a javascript function, something like:

     <script type='text/javascript'>
     function toggle(btn)
     {
          var btnArray = document.getElementsByClassName('button');
          for(i = 0; i < btnArray.length; i++)
          {
              if(btn == btnArray[i])
              {
                  //the button is the button which is clicked
                  if(!btn.classList.contains("clicked"))
                  {
                      btn.className += " clicked";
                  }
              }
              else
              {
                  //remove class clicked, just reset the classname
                  btnArray[i].className = "button";
              }
          }


     }

     </script>

     <button class="button" onclick="toggle(this);">btn1</button>
     <button class="button" onclick="toggle(this);">btn2</button>
     <button class="button" onclick="toggle(this);">btn3</button>

You can add a description of the class 'clicked' in your css.

    .clicked{
        background-color: red;
    }

(I tested this piece of code in Chromium and it works).

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.