jQuery移动导航选项卡
jQuery移动导航选项卡
提问于 2011-07-28 02:01:39
我想在我的jQuery移动项目中有一个标签导航。我知道我可以使用数据角色' navbar‘，但我只想更改导航栏下面的内容，而不是滑动到新页面。到目前为止，我只能有几个不同的页面，具有相同的导航栏，彼此链接，但这不是我想要的。
有谁可以帮我？
提前谢谢你
回答 5
Stack Overflow用户
发布于 2012-02-17 05:56:52
更新:在http://jsfiddle.net/ryanhaney/eLENj/上查看我的jsfiddle
我刚刚花了一些时间弄清楚这个问题，所以我想我应该回答这个问题。请注意，我使用的是多页单文件YMMV。
<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">Page 3</a></li>
</ul>
</div>
</div>
$("div[data-role=page]").bind("pagebeforeshow", function () {
// prevents a jumping "fixed" navbar
$.mobile.silentScroll(0);
});
$("a[data-role=tab]").each(function () {
// bind to click of each anchor
var anchor = $(this);
anchor.bind("click", function () {
// change the page, optionally with transitions
// but DON'T navigate...
$.mobile.changePage(anchor.attr("href"), {
transition: "none",
changeHash: false
});
// cancel the click event
return false;
});
});Stack Overflow用户
发布于 2012-06-28 01:03:01
@Mike Bartlett
我自己也在努力解决这个问题，但是在分解了Jasper的代码之后，看起来他发布的代码和jsfiddle页面上的代码有一些细微的差别。
他发布帖子的地方
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show(); });我发现将最后一行更改为简单地调用您在导航栏中设置的"data-href“值的任何内容是很有用的。
$('div[data-role="navbar"] a').live('click', function () {
$(this).addClass('ui-btn-active');
$('div.content_div').hide();
$($(this).attr('data-href')).show();
});然后，我的导航栏html显示为
<div data-role="navbar">
<ul>
<li><a href="#" data-href="#a">One</a></li>
<li><a href="#" data-href="#b">Two</a></li>
</ul>
这与他的基本相同，但出于某种原因，我没有收到“加载页面时出错”的消息。希望这能帮上忙。
Stack Overflow用户
发布于 2013-07-02 16:14:45
请参考下面的链接，获取jquery中所有类型的导航栏
http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div>谢谢
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6849019
复制相关文章
相似问题