title: Javascript onclick menu change background colors
body: <p>I have my menu like this:</p>
  
  <p><a href="https://jsfiddle.net/23r4q610/" rel="nofollow">https://jsfiddle.net/23r4q610/</a></p>
  
  <p>And my code to change the selected menu button like below:</p>
  
  <pre><code>$('#bluebutton').click(function () {
      $('.testul li').removeClass('selectedred selectedpurple selectedgreen selectedorange');
      $('#bluebutton').addClass('selectedblue');
  });
  
  $('#redbutton').click(function () {
      $('.testul li').removeClass('selectedblue selectedpurple selectedgreen selectedorange');
      $('#redbutton').addClass('selectedred');
  });
  
  $('#purplebutton').click(function () {
      $('.testul li').removeClass('selectedblue selectedred selectedgreen selectedorange');
      $('#purplebutton').addClass('selectedpurple');
  });
  
  $('#greenbutton').click(function () {
      $('.testul li').removeClass('selectedblue selectedred selectedpurple selectedorange');
      $('#greenbutton').addClass('selectedgreen');
  });
  
  $('#orangebutton').click(function () {
      $('.testul li').removeClass('selectedblue selectedred selectedpurple selectedgreen ');
      $('#orangebutton').addClass('selectedorange');
  });
  </code></pre>
  
  <p>Ofcourse this is bad code since it could be written much shorter. Should I go about this using just numbers so I can do some foreach, or is there a better way to do this?</p>