Javascript 如何使用jQuery高效地添加和删除类

我已经设法让这段代码正常工作了，但它对我来说毫无意义，它太长了，必须有另一种方法来完成或简化它。有人能给我指出正确的方向吗

谢谢

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

---

您应该在每个元素中添加一个

类

，以缩短JQuery，而不是将这个

id

作为基础。因此：

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

为您的选项卡添加一个“分类”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
}};

---

首先，确保content DIV选项卡具有单独的ID，而不是单独的类（例如

#htab1

）和一个公共类（例如

.htab

）。同样，您的菜单元素（例如

#hmenu 1

和

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

例如，如果您的选项卡和菜单项都分组在各自的父项下，那么代码可能会更高效。使用此类标记，您可以使用

.sibbins（）

而不是基于类的选择器来查找该组中的所有其他元素：

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

---

请同时显示您的标记。现在我只能说：这当然有可能让它变得更好：）。按类搜索是JavaScript中最慢的事情之一。他最好找到选项卡项的容器并从中设置子对象（即单个选项卡项）类。他的div有不同的类，而不是id。

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