Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jun 13th, 2012  |  syntax: None  |  size: 5.68 KB  |  hits: 20  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How to efficiently add and remove classes using jQuery
  2. var TabbedContent = {
  3. init: function() {      
  4.  
  5. $(".menu > li").click(function(e){
  6.     switch(e.target.id){
  7.         case "htab1":
  8.             //change status & style menu
  9.             $("#htab1").addClass("active");
  10.             $("#htab2").removeClass("active");
  11.             $("#htab3").removeClass("active");
  12.             $("#htab4").removeClass("active");
  13.             $("#htab5").removeClass("active");
  14.             $("#htab6").removeClass("active");
  15.             //display selected division, hide others
  16.             $("div.htab1").fadeIn();
  17.             $("div.htab2").css("display", "none");
  18.             $("div.htab3").css("display", "none");
  19.             $("div.htab4").css("display", "none");
  20.             $("div.htab5").css("display", "none");
  21.             $("div.htab6").css("display", "none");
  22.         break;
  23.         case "htab2":
  24.             //change status & style menu
  25.             $("#htab1").removeClass("active");
  26.             $("#htab2").addClass("active");
  27.             $("#htab3").removeClass("active");
  28.             $("#htab4").removeClass("active");
  29.             $("#htab5").removeClass("active");
  30.             $("#htab6").removeClass("active");          
  31.             //display selected division, hide others
  32.             $("div.htab2").fadeIn();
  33.             $("div.htab1").css("display", "none");
  34.             $("div.htab3").css("display", "none");
  35.             $("div.htab4").css("display", "none");
  36.             $("div.htab5").css("display", "none");
  37.             $("div.htab6").css("display", "none");
  38.         break;
  39.         case "htab3":
  40.             //change status & style menu
  41.             $("#htab1").removeClass("active");
  42.             $("#htab2").removeClass("active");
  43.             $("#htab3").addClass("active");
  44.             $("#htab4").removeClass("active");
  45.             $("#htab5").removeClass("active");
  46.             $("#htab6").removeClass("active");  
  47.             //display selected division, hide others
  48.             $("div.htab3").fadeIn();
  49.             $("div.htab1").css("display", "none");
  50.             $("div.htab2").css("display", "none");
  51.             $("div.htab4").css("display", "none");
  52.             $("div.htab5").css("display", "none");
  53.             $("div.htab6").css("display", "none");
  54.         break;
  55.         case "htab4":
  56.             //change status & style menu
  57.             $("#htab1").removeClass("active");
  58.             $("#htab2").removeClass("active");
  59.             $("#htab3").removeClass("active");
  60.             $("#htab4").addClass("active");
  61.             $("#htab5").removeClass("active");
  62.             $("#htab6").removeClass("active");          
  63.             //display selected division, hide others
  64.             $("div.htab4").fadeIn();
  65.             $("div.htab1").css("display", "none");
  66.             $("div.htab2").css("display", "none");
  67.             $("div.htab3").css("display", "none");
  68.             $("div.htab5").css("display", "none");
  69.             $("div.htab6").css("display", "none");
  70.         break;case "htab5":
  71.             //change status & style menu
  72.             $("#htab1").removeClass("active");
  73.             $("#htab2").removeClass("active");
  74.             $("#htab3").removeClass("active");
  75.             $("#htab4").removeClass("active");
  76.             $("#htab5").addClass("active");
  77.             $("#htab6").removeClass("active");      
  78.             //display selected division, hide others
  79.             $("div.htab5").fadeIn();
  80.             $("div.htab1").css("display", "none");
  81.             $("div.htab2").css("display", "none");
  82.             $("div.htab3").css("display", "none");
  83.             $("div.htab4").css("display", "none");
  84.             $("div.htab6").css("display", "none");
  85.         break;case "htab6":
  86.             //change status & style menu
  87.             $("#htab1").removeClass("active");
  88.             $("#htab2").removeClass("active");
  89.             $("#htab3").removeClass("active");
  90.             $("#htab4").removeClass("active");
  91.             $("#htab5").removeClass("active");
  92.             $("#htab6").addClass("active");
  93.             //display selected division, hide others
  94.             $("div.htab6").fadeIn();
  95.             $("div.htab1").css("display", "none");
  96.             $("div.htab2").css("display", "none");
  97.             $("div.htab3").css("display", "none");
  98.             $("div.htab4").css("display", "none");
  99.             $("div.htab5").css("display", "none");
  100.         break;
  101.     }
  102.     //alert(e.target.id);
  103.     return false
  104. });
  105. }};
  106.        
  107. $(".menu > li").click(function(e){
  108.     $(".menu > li").removeClass('active'); // assuming li elements go 'active'
  109.     $(".menu > li > div").hide();
  110.     $("#" + e.target.id).addClass('active');
  111.     $("div." + e.target.id).fadeIn();
  112. });
  113.        
  114. // ...
  115. switch(e.target.id){
  116.     case "htab1":
  117.         //change status & style menu
  118.         $(".menuItem").removeClass("active");
  119.         $("#htab1").addClass("active");
  120. // ...
  121.        
  122. $(".menu > li").click(function(e){
  123.     var activeTab = "#" + e.target.id;
  124.     var activeDiv = "." + e.target.id;
  125.     $(".htabs").removeClass("active");
  126.     $(".htabDivs").css("display", "none");
  127.     $(activeTab).addClass("active");
  128.     $(activeDiv).fadeIn();
  129.     return false
  130. }};
  131.        
  132. $(".menu > li").click(function(e) {
  133.      // "this" is the clicked element in jQuery handlers
  134.      $('.hmenu').not(this).removeClass('active');
  135.      $(this).addClass('active');
  136.  
  137.      // make a selector for the relevant tab
  138.      var tab = this.id.replace('hmenu', '#htab');
  139.      $('.htab').not(tab).css('display', 'none');
  140.      $(tab).fadeIn();
  141. });
  142.        
  143. $(".menu > li").click(function(e) {
  144.      // "this" is the clicked element in jQuery handlers
  145.      $(this).addClass('active').siblings().removeClass('active');
  146.  
  147.      // make a selector for the relevant tab
  148.      var tab = this.id.replace('hmenu', '#htab');
  149.      $(tab).fadeIn().siblings().css('display', 'none');
  150. });
create a new version of this paste RAW Paste Data