如何点击footer中的navbar只切换content的内容
发布网友
发布时间：2024-10-04 09:05
共1个回答
热心网友
时间：2024-10-04 10:42
<div data-role="page">
<div data-role="header">header</div>
<div data-role="content">这里是内容</div>
<div data-role="footer">footer</div>
</div>
格式如上，点击相应的结构菜单的时候希望它只替换
<div data-role="content"> ....... </div>
中的内容，然而它却是以页面的形式替换了整个一个"Page"。
关于这个问题，其实并没有很好的解决办法，这我估计是html的通病。
我google了一下（不要，估计搜索不到类似的问题），老外的解决办法其实和我之前的办法一样，就是在每个page中都重复写一个navbar，具体见下面的html：
Html代码 收藏代码
<div id="home" data-role="page">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<p>
<a href="#page-1">Page 1</a>
</p>
</div>
</div>
<div id="page-1" data-role="page">
<div data-role="header">
<a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
<h1>Page 1</h1>
</div>
<div data-role="content">
<p>Page 1 content</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page-1" data-role="tab" data-icon="grid" class="ui-btn-active">Page 1</a></li>
<li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>
<li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>
</ul>
</div>
</div>
</div>
<div id="page-2" data-role="page">
<div data-role="header">
<a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
<h1>Page 2</h1>
</div>
<div data-role="content">
<p>Page 2 content</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>
<li><a href="#page-2" data-role="tab" data-icon="grid" class="ui-btn-active">Page 2</a></li>
<li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>
</ul>
</div>
</div>
</div>
<div id="page-3" data-role="page">
<div data-role="header">
<a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
<h1>Page 3</h1>
</div>
<div data-role="content">
<p>Page 3 content</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>
<li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>
<li><a href="#page-3" data-role="tab" data-icon="grid" class="ui-btn-active">Page 3</a></li>
</ul>
</div>
</div>
</div>
他只不过是把页面跳转的效果去掉（默认是slide）了，让人感觉没切换page，只改变了中间的content。
具体JS如下：
Javascript代码 收藏代码
$("a[data-role=tab]").each(function () {
var anchor = $(this);
anchor.bind("click", function () {
$.mobile.changePage(anchor.attr("href"), {
transition: "none",
changeHash: false
});
return false;
});
});
$("div[data-role=page]").bind("pagebeforeshow", function (e, data) {
$.mobile.silentScroll(0);
$.mobile.changePage.defaults.transition = 'slide';
});
这是目前最好也是最能理解的解决办法。
