How to efficiently add and remove classes using jQuery

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 ?

thanks

var TabbedContent = {
init: function() {      

$(".menu > li").click(function(e){
    switch(e.target.id){
        case "htab1":
            //change status & 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 & 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 & 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 & 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 & 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 & 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
});
}};

$(".menu > li").click(function(e){
    $(".menu > li").removeClass('active'); // assuming li elements go 'active'
    $(".menu > li > div").hide();
    $("#" + e.target.id).addClass('active');
    $("div." + e.target.id).fadeIn();
});

Instead of making this id based, you should add a class to each of your elements to make your JQuery shorter. Thus:

// ...
switch(e.target.id){
    case "htab1":
        //change status & style menu
        $(".menuItem").removeClass("active");
        $("#htab1").addClass("active");
// ...

Add a "categorization" CSS class for your tabs so that you can change them all at once. For example:

$(".menu > li").click(function(e){
    var activeTab = "#" + e.target.id;
    var activeDiv = "." + e.target.id;
    $(".htabs").removeClass("active");
    $(".htabDivs").css("display", "none");
    $(activeTab).addClass("active");
    $(activeDiv).fadeIn();
    return false
}};

First, ensure your content DIV tabs have separate IDs, not separate classes (e.g. #htab1) and one class in common (e.g. .htab). Likewise your menu elements (e.g. #hmenu1 and .hmenu)

Given we don't know anything about your markup and element hierarchy, then try this:

$(".menu > li").click(function(e) {
     // "this" is the clicked element in jQuery handlers
     $('.hmenu').not(this).removeClass('active');
     $(this).addClass('active');

     // make a selector for the relevant tab
     var tab = this.id.replace('hmenu', '#htab');
     $('.htab').not(tab).css('display', 'none');
     $(tab).fadeIn();
});

More efficient code is possible if, for example, your tabs and menu items are all grouped under their own respective parents. With such markup you can use .siblings() instead of class-based selectors to find all other elements in that group:

$(".menu > li").click(function(e) {
     // "this" is the clicked element in jQuery handlers
     $(this).addClass('active').siblings().removeClass('active');

     // make a selector for the relevant tab
     var tab = this.id.replace('hmenu', '#htab');
     $(tab).fadeIn().siblings().css('display', 'none');
});