在不刷新整个页面的情况下显示/隐藏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。