Как эффективно добавлять и удалять классы, используя jQuery

Question

Мне удалось заставить этот код работать, но он не имеет смысла для меня, это слишком долго, должен быть другой способ сделать это или упростить его. Кто-нибудь может направить меня в правильном направлении?

спасибо

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
});
}};

Answer 1

$(".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();
});

Answer 2

Во-первых, убедитесь, что вкладки DIV вашего контента имеют отдельные идентификаторы, а не отдельные классы (например, #htab1) и один общий класс (например, .htab). Аналогично, ваши элементы меню (например, #hmenu1 и .hmenu)

Учитывая, что мы ничего не знаем о вашей разметке и иерархии элементов, попробуйте следующее:

$(".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();
});

Более эффективный код возможен, если, например, все ваши вкладки и пункты меню сгруппированы по своим соответствующим родителям. С такой разметкой вы можете использовать .siblings() вместо селекторов на основе классов, чтобы найти все другие элементы в этой группе:

$(".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');
});

Answer 3

Добавьте CSS-класс «категоризации» для ваших вкладок, чтобы вы могли изменить их все сразу.Например:

$(".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
}};

Answer 4

Вместо того, чтобы делать это на основе id, вы должны добавить class к каждому из ваших элементов, чтобы сделать JQuery короче. Таким образом:

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