title: How to efficiently add and remove classes using jQuery
body: <p>i have managed to get this code working, but it doesnt make sense to me, its too long, there must be another way to do this or simplify it. can some one point me in the right direction ?</p>
  
  <p>thanks</p>
  
  <pre><code>var TabbedContent = {
  init: function() {      
  
  $(".menu &gt; li").click(function(e){
      switch(e.target.id){
          case "htab1":
              //change status &amp; style menu
              $("#htab1").addClass("active");
              $("#htab2").removeClass("active");
              $("#htab3").removeClass("active");
              $("#htab4").removeClass("active");
              $("#htab5").removeClass("active");
              $("#htab6").removeClass("active");
              //display selected division, hide others
              $("div.htab1").fadeIn();
              $("div.htab2").css("display", "none");
              $("div.htab3").css("display", "none");
              $("div.htab4").css("display", "none");
              $("div.htab5").css("display", "none");
              $("div.htab6").css("display", "none");
          break;
          case "htab2":
              //change status &amp; style menu
              $("#htab1").removeClass("active");
              $("#htab2").addClass("active");
              $("#htab3").removeClass("active");
              $("#htab4").removeClass("active");
              $("#htab5").removeClass("active");
              $("#htab6").removeClass("active");          
              //display selected division, hide others
              $("div.htab2").fadeIn();
              $("div.htab1").css("display", "none");
              $("div.htab3").css("display", "none");
              $("div.htab4").css("display", "none");
              $("div.htab5").css("display", "none");
              $("div.htab6").css("display", "none");
          break;
          case "htab3":
              //change status &amp; style menu
              $("#htab1").removeClass("active");
              $("#htab2").removeClass("active");
              $("#htab3").addClass("active");
              $("#htab4").removeClass("active");
              $("#htab5").removeClass("active");
              $("#htab6").removeClass("active");  
              //display selected division, hide others
              $("div.htab3").fadeIn();
              $("div.htab1").css("display", "none");
              $("div.htab2").css("display", "none");
              $("div.htab4").css("display", "none");
              $("div.htab5").css("display", "none");
              $("div.htab6").css("display", "none");
          break;
          case "htab4":
              //change status &amp; style menu
              $("#htab1").removeClass("active");
              $("#htab2").removeClass("active");
              $("#htab3").removeClass("active");
              $("#htab4").addClass("active");
              $("#htab5").removeClass("active");
              $("#htab6").removeClass("active");          
              //display selected division, hide others
              $("div.htab4").fadeIn();
              $("div.htab1").css("display", "none");
              $("div.htab2").css("display", "none");
              $("div.htab3").css("display", "none");
              $("div.htab5").css("display", "none");
              $("div.htab6").css("display", "none");
          break;case "htab5":
              //change status &amp; style menu
              $("#htab1").removeClass("active");
              $("#htab2").removeClass("active");
              $("#htab3").removeClass("active");
              $("#htab4").removeClass("active");
              $("#htab5").addClass("active");
              $("#htab6").removeClass("active");      
              //display selected division, hide others
              $("div.htab5").fadeIn();
              $("div.htab1").css("display", "none");
              $("div.htab2").css("display", "none");
              $("div.htab3").css("display", "none");
              $("div.htab4").css("display", "none");
              $("div.htab6").css("display", "none");
          break;case "htab6":
              //change status &amp; style menu
              $("#htab1").removeClass("active");
              $("#htab2").removeClass("active");
              $("#htab3").removeClass("active");
              $("#htab4").removeClass("active");
              $("#htab5").removeClass("active");
              $("#htab6").addClass("active");
              //display selected division, hide others
              $("div.htab6").fadeIn();
              $("div.htab1").css("display", "none");
              $("div.htab2").css("display", "none");
              $("div.htab3").css("display", "none");
              $("div.htab4").css("display", "none");
              $("div.htab5").css("display", "none");
          break;
      }
      //alert(e.target.id);
      return false
  });
  }};
  </code></pre>