CodePen

HTML

            
              <ul class="switch">
  <li id="wood">wood</li>
  <li id="crossed">crossed</li>
  <li id="fabric">fabric</li>
  <li id="linnen">linnen</li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              .switch:after {
  content: "";
  display: block;
  clear: both;
}

.switch > li {
  display: block;
  float: left;
  padding: 0.1em 1em;
  cursor: pointer;
}

#wood, .wood {
  background-color: #ff3031;
}
#crossed, .crossed {
  background-color: #7bb010;
}
#fabric, .fabric {
  background-color: #00a8da;
}
#linnen, .linnen {
  background-color: #ffa400;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function (){
  var body = $('body');
  
  // get cookie if set, else default to 'wood'
  //var currentClass = $.cookie('mycookie') || 'wood';
  var currentClass = 'wood';
  
  // initial class
  body.addClass(currentClass);
  
  // switch class on click
  $('.switch > li').click(function() {
    body.removeClass(currentClass);
    currentClass = $(this).attr('id');
    body.addClass(currentClass);
    //$.cookie('mycookie', currentClass);
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................