jQuery 移动基础知识

Question

我正在尝试学习如何使用 jQuery 移动设备进行编程，但我不明白为什么这段代码不起作用：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
</head>

<body>

<!-- Start of first page -->
 <div data-role="page" id="First">

<div data-role="header">
    <h1>First</h1>
</div><!-- /header -->

<div role="main" class="ui-content">
    <p>First Page</p>
    <p>View page called <a href="#Second" data-role="button">Second</a></p>
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->
 </div><!-- /page -->

 <!-- Start of second page -->
 <div data-role="page" id="Second">

<div data-role="header">
    <h1>Second</h1>
</div><!-- /header -->

 <div role="main" class="ui-content">
    <p>Second Page</p>
    <p><a href="#First">Back to First</a></p>
 </div><!-- /content -->

 <div data-role="footer">
    <h4>Page Footer</h4>
 </div><!-- /footer -->
 </div><!-- /page -->
 </body>

非常感谢您的帮助！

Answer 1

您发布的标记使用 JSFiddle 时效果很好。

您发布的示例与我在 JSFiddle 上创建的示例（除了缺少结束 HTML 标记）之间的唯一区别是对外部库的路径引用：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

用上面的块替换您的脚本和样式表引用，看看它是否有效。这些库托管在 Google 的内容分发网络 (CDN) 上。如果这有效，则这些文件的本地版本的路径是错误的，您需要更正它们。

这是一个解释文件路径的页面：

http://css-tricks.com/quick-reminder-about-file-paths/

jQuery 移动基础知识

jQuery Mobile basics

html

jquery-mobile