javascript - 只显示一个元素并隐藏其他元素而不切换

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