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

您应该为每个元素添加id，而不是基于class，以缩短JQuery。因此：

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

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

首先，确保您的内容DIV标签具有单独的ID，而不是单独的类（例如#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');
});

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

4 个答案: