我正在尝试配置一个滑动面板 jqm 1.3.1。我总是创建“one page-jqm”-Pages 一个 index.html 和几个
现在我试图让滑动面板工作，但是当我添加第二个页面时，该页面卡在加载屏幕中。
我的代码会解释我的意思:
<!DOCTYPE html>
<html lang="de">
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!-- Page 1 -->
<div data-role="page" id="page1">
<div id="header" data-theme="c" data-role="header">
<a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
Test123
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div data-role="panel" id="menue" data-display="push" data-theme="a">
<div data-role="controlgroup">
<h2>Menü</h2>
<a href="#page1" data-role="button" class="ui-btn-active">Home</a>
<a href="#page2" data-role="button">Erlaubte Lebensmittel</a>
<a href="#page3" data-role="button">Verbotene Lebensmittel</a>
<a href="#page4" data-role="button">Frühstück</a>
</div>
</div>
<div>
<!-- Page 2 -->
<div data-role="page" id="page2">
<div id="header" data-theme="c" data-role="header">
<a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
Test123
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div data-role="panel" id="menue" data-display="push" data-theme="a">
<div data-role="controlgroup">
<h2>Menü</h2>
<a href="#page1" data-role="button" class="ui-btn-active">Home</a>
<a href="#page2" data-role="button">Erlaubte Lebensmittel</a>
<a href="#page3" data-role="button">Verbotene Lebensmittel</a>
<a href="#page4" data-role="button">Frühstück</a>
</div>
</div>
<div>
我提前感谢大家的帮助 cookies 182
编辑:浏览器控制台显示: 未捕获的类型错误:无法读取未定义的属性“选项”
EDIT2:我忘了关闭页面 Divs，非常感谢 Omar
最佳答案
I stripped your footer menu blocks and if you look at this structure it will probably help you out to why your page is not navigating to the next page... Be sure to take a look at the naming conventions as well pertaining to the anchor tags...
<!DOCTYPE html>
<html lang="de">
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!-- Page 1 -->
<section id="firstpage" data-role="page">
<div id="header" data-theme="c" data-role="header">
<a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info"></a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
<p>This is page 1</p>
<p><a href="#secondpage">Go to second page</a></p>
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div>
</section>
<!-- Page 2 -->
<div data-role="page" id="secondpage">
<div id="header" data-theme="c" data-role="header">
<a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
this is page 2
<p><a href="#firstpage">Go to first page</a></p>
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div>
关于javascript - Jquerymobile 面板链接问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18440311/