只顯示一個元素並隱藏沒有切換鍵的其他元素

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