在不刷新整个页面的情况下显示/隐藏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属性的正确值可能并不总是{{1} }。例如，当您处理block时，默认情况下，它应为span。