我正在构建一个使用标签来导航页面的网页 -
<a href="#mymenutag">Menu</a>
...
<nav id="mymenutag">
<ul>
<li class="first"><a href="index.html">Index</a></li>
<li><a href="happy.html">Happy</a></li>
<li class="last"><a href="nowhere.html">Nowhere</a></li>
</ul>
/nav>
这通常工作正常,除非我还包括脚本参考 -
<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
然后,导航不再起作用。还加载了许多其他 jquery 移动脚本,但这是破坏导航的脚本。还有一些其他的 ID 选择器仍然有效,但我认为它们是通过 jquery mobile 处理的。这个不是;它只是导航到同一页面上的新位置。
我在 github 上设置了一个工作示例,可以在这里找到:
https://github.com/hypnoboy/jqmobile_breaks_html5_navt
可以通过单击页面来观察该行为。作为奖励并使其更易于查看,我添加了一张我最喜欢的“WTF”软件安装时刻的 jpg 照片。
这是可能出现问题的完整示例网页:
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<!--begin entries for jquerymobile-->
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<script src="libs/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--end entries for jquerymobile-->
</head>
<body>
<!-- start of navigation -->
<a href="#mymenutag">Menu</a>
<!-- end of navigation -->
<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<!-- causes href navigation in the page to fail -->
<header><div class=main_heading>
<h1>Sad Test App (jquery.mobile-1.3.1.min.js is running)</h1></div>
</header>
<p>This is some sample text
</p>
<a href="#mymenutag">Menu</a>
<a href="#mymenutag" data-role="button" data-transition="slide">Menu</a>
<img id="front" src="WP_000241.jpg"/>
<!--start of navigation-->
<nav id="mymenutag">
<ul>
<li class="first"><a href="index.html">Index</a></li>
<li><a href="happy.html">Happy</a></li>
<li class="last"><a href="nowhere.html">Nowhere</a></li>
</ul>
</nav>
<!-- /end of navigation -->
<script src="js/vendor/jquery-2.0.2.min.js"></script>
<script src="js/helper.js"></script>
<script src="js/main.js"></script>
<script src="libs/app.js" type="text/javascript"></script>
<script src="pages.js" type="text/javascript"></script>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</body>
</html>
任何帮助表示赞赏。