Jquery mobile 更改后页面选项卡不工作
我是jquery mobile的新手。我有两个页面,分别是page1.html和page2.html。page1将导航到page2,page2内部有一个导航栏 这是我的密码 page1.html导航到第2页Jquery mobile 更改后页面选项卡不工作,jquery-mobile,tabs,navbar,Jquery Mobile,Tabs,Navbar,我是jquery mobile的新手。我有两个页面,分别是page1.html和page2.html。page1将导航到page2,page2内部有一个导航栏 这是我的密码 page1.html导航到第2页 $.mobile.pageContainer.pagecontainer("change", "page2.html", { allowSamePageTransition: true, transition: 'none', showLoadMsg: false
$.mobile.pageContainer.pagecontainer("change", "page2.html", {
allowSamePageTransition: true,
transition: 'none',
showLoadMsg: false,
reloadPage: false,
changeHash: true
})
页面2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>collapsible demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content" class="ui-content">
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
</div>
<div id="fragment-1">
<p>This is the content of the tab 'One', with the id fragment-1.</p>
</div>
<div id="fragment-2">
<p>This is the content of the tab 'Two', with the id fragment-2.</p>
</div>
<div id="fragment-3">
<p>This is the content of the tab 'Three', with the id fragment-3.</p>
</div>
</div>
</div>
</div>
</body>
</html>
可折叠演示
jQuery移动示例
这是选项卡“One”的内容,id为fragment-1
这是标签'Two'的内容,id为fragment-2
这是标签“三”的内容,id为fragment-3
如果我单独运行第2页,它可以工作。但一旦我把第一页换到第二页,问题就来了。请不要回复我添加
rel=“external”
一旦我使用rel=“external”这是一个已知的jQuery Mobile 1.4错误,它将在jQuery Mobile 1.4.3版本中修复
请在此处阅读更多信息:
在那里你还可以找到一个解决办法
还有另一个解决方案,它要求您动态创建选项卡小部件,如下所示:
$(document).on("pagecreate", "#p2", function () {
var tabs = '<div data-role="tabs" id="tbPaymentMethod"><div data-role="navbar"><ul><li><a href="#tabCash">Tab 1</a></li><li><a href="#tabCcard">Tab 2</a></li><li><a href="#tabCheck">Tab 3</a></li></ul></div><div id="tabCash"><p>This is the content of the tabwith the id fragment-1.</p></div><div id="tabCcard"><p>This is the content of the tabwith the id fragment-2.</p></div><div id="tabCheck"><p>This is the content of the tabwith the id fragment-3.</p></div></div>';
$("#p2 .ui-content").append(tabs).enhanceWithin();
});
$(文档)。在(“页面创建”和“p2”上,函数(){
var tabs='- 这是id片段为1的tab的内容。这是id片段为2的tab的内容。这是id片段为3的tab的内容。;
$(“#p2.ui内容”).append(制表符).enhanceWithin();
});
工作示例:谢谢。你真的帮了我很多