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

Show only one element and hide others without toggle

本文关键字：元素 其他 隐藏 一个 显示      更新时间：2023-09-26

我一直在研究这个问题，很多答案都涉及切换函数。问题是，我希望始终显示一个元素，如果使用toggle，这是不可能的（他们可能不小心点击了某个东西，它就会消失）。所以我是这样做的：

$(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还没有达到高级水平，所以请提供解释。感谢

您可以给它们一个类。。或者将它们组合在一个选择器中

$(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");    
});
相关文章：