jquerymobile只替换content div

我正在使用jquerymobile，我喜欢多页的概念，在这个概念中，只需参考他们的id，就可以用另一个页面替换洞页面

现在我的应用程序有一个导航栏（当然），我讨厌当我点击导航栏中的链接时，整个页面都向左滑动（包括导航栏），而另一个页面则从右滑动

我只想替换content div，导航条应该固定在底部，而不需要一直刷新！你知道我的意思吗？如果我只是引用content div id，它的工作方式与我引用页面id的工作方式不同

---

我希望你明白我的意思。那么我该如何处理呢？

一种方法是覆盖链接的

单击事件，并用新内容替换div（目标）的内容。在jQuery中这样做很简单，例如

 $('#replacement-target').html( $('#source-content').html() ); 

要使用jQuery，您可能需要对内容调用
refresh
，以确保框架对其进行了正确的样式设置

请参见此示例。
另一种解决方案是关闭过渡效果
$.mobile.defaultPageTransition='none'

并使用固定页脚

Ryan的建议也有效。请记住，如果您决定覆盖click事件，并绕过jqm导航模型，那么您对jqm页面事件的访问将受到限制，这非常方便。这实际上取决于你的应用程序需要什么。
对我来说有效的方法是通过使用外部标题将标题/导航栏从页面中移除。这样，我仍然可以使用jquery页面转换并保持导航栏的静态

$('#replacement-target-page-id div[data-role="content"]').replaceWith(
    function(return$('#source-content-page-id div[data-role="content"]').contents();)

此处记录了外部工具栏-

我必须初始化navbar和任何其他组件，以便将其保留在页面DOM之外。在这种情况下，请单击菜单面板。以下是jqm文档中的代码：

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="menu-panel"></div>
<div data-role="page" id="home">
    <div role="main" class="ui-content"></div>
</div>

<script>
$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
    $( "[data-role='panel']" ).panel();
});
</script>


$（函数（）{
$（“[data role='header']，[data role='footer']”）工具栏（）；
$（“[data role='panel']”）.panel（）；
});
谢谢。但是在你的代码中，你也会刷新整个页面，而不仅仅是内容div？它只是用另一个div的内容替换一个div的内容。页脚移动是因为内容大小不同。要解决这个问题，您可以使用固定页脚，即
谢谢。我的页脚是固定的，但是当你点击导航栏上的一个按钮时，整个页面（包括导航栏）都在刷新，这让我很恼火。我希望导航栏是固定的，就像iOS应用程序（比如ipod应用程序）有固定的导航栏一样。看看上面的链接，你是否尝试过在标题上设置data position=“fixed”？或者您可以使用持久的导航栏。