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

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

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

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

1 个答案: