Click States with jQuery and CSS

by Akram kamal

HTML

<div class="boxSet">Click Me 1</div>
<div class="boxSet">Click Me 2</div>
<div class="boxSet">Click Me 3</div>

<!--
http://www.stylinwithcss.com/blog/post.php?s=2012-12-21-click-states-with-jquery-and-css---part-1
-->

CSS

div.box1, div.box2, div.boxSet {
		margin: 10px 20px;
		height:120px;
		width:140px;
		background:#4eb8ea;
		color:#FFF;
                padding:8px;
                cursor:pointer;
		}
	div.boxSet {float:left; padding:10px;} /* puts elements side by side */
	div.box1:hover {background:#f58c21;}
	div.box2.hilite {background:#f58c21;}
	div.boxSet.hilite {background:#f58c21; color:#555;}	
/* note there is no space between class names because they are on same element */

JavaScript

$(document).ready(function(){  /* when the page has loaded... */
  $('.boxSet').click(function(){  /* ...bind click event to .boxSet elements */
    $('.boxSet').removeClass('hilite'); /* On click, remove any 'hilite' class */
    $(this).addClass('hilite'); /* ...and add 'hilite' class to clicked element */ 
   });
});