在不刷新整個頁面的情況下顯示/隱藏PhoneGap頁面內容的最佳方式？

Question

我是PhoneGap的新手，這已經讓我的大腦數星期。我想知道是否有人能夠以最佳方式向我提供他們的意見。

這裏是我的應用程序頁面佈局的非常快速的繪圖：

黑色=頭

藍=按鈕

霜=內容區域

內容區域具有3個div，我想顯示哪個按鈕被點擊。我想讓黑頭不必刷新。

什麼是每次按下按鈕時刷新div的最佳方式？

Answer 1

由於您使用jQuery（從標籤獲得）您可以方便地顯示/隱藏要素：

$btn1 = $('#btn1'); 
$pnl1 = $('#pnl1'); 
$pnl2 = $('#pnl2'); 

$btn1.click(function(){ 
    $pnl1.show(); 
    $pnl2.hide(); 
}); 

使用此方法的所有內容必須出現在網站上 - 它不會延遲加載。

您也可以在需要時使用Ajax加載內容。

Answer 2

可以使用display CSS屬性或jQuery的.show()/.hide()方法來顯示/隱藏DOM元素：

$('#button1').click(function() { 
    // jQuery style 
    $('#div1').show(); 
    $('#div2').hide(); 

    // Vanilla JS style 
    document.getElementById('div1').style.display = 'none'; 
    document.getElementById('div2').style.display = 'block'; 
}); 

如果您選擇使用display屬性，請留意，當你想展示一個隱藏的元素，設置爲display屬性的正確值可能不總是block。例如，當您處理span時，默認情況下它應該是inline。