只显示一个元素并隐藏没有切换键的其他元素

Question

我一直在研究这个问题，许多答案都涉及切换功能。问题是我希望随时显示一个元素，如果使用切换（这可能会意外地点击某个元素并且它消失），这是不可能的。所以我这样做：

$(document).ready(function(){ 
    $("#goals").hide(); 
    $("#History").addClass("selected"); 

    $("#History").click(function(e){ 
     e.preventDefault(); 
     $("#history").show(); 
     $("#goals").hide(); 
     $("#History").addClass("selected"); 
     $("#Goals").removeClass("selected"); 

    }); 
    $("#Goals").click(function(e){ 
     e.preventDefault(); 
     $("#goals").show(); 
     $("#history").hide(); 
     $("#Goals").addClass("selected"); 
     $("#History").removeClass("selected"); 
    }); 
}); 

除了它太麻烦了，我敢肯定还有更好的办法。我试图找到只使用隐藏和显示的解决方案，或者如果需求可以实现。任何帮助表示赞赏...我没有先进的jQuery，所以请提供解释。谢谢

Answer 1

你可以给他们一个类..或只是结合了他们一个选择

$(document).ready(function(){ 
    $("#goals").hide(); 
    $("#History").addClass("selected"); 
    var eles = $("#History,#Goals"); 
    eles.click(function(e){ 
     e.preventDefault(); 
     $(this).show().addClass('selected'); // show and add class to current clicked 
     eles.not(this).hide().removeClass('selected'); // hide and remove class for the other one 
    }); 
}); 

编辑：我没有注意到，你实际上有不同的ID的

var hg = $("#history,#goals"); 
var HG = $("#History,#Goals"); 
HG.click(function(e){ 
    e.preventDefault(); 
    var el = $('#'+this.id.toLowerCase()); 
    el.show(); 
    hg.not(el).hide(); 
    $(this).addClass("selected"); 
    HG.not(this).removeClass("selected");  
});