Html jQuery移动基础_Html_Jquery Mobile

Html jQuery移动基础

html jquery-mobile

Html jQuery移动基础,html,jquery-mobile,Html,Jquery Mobile,我正在尝试学习如何使用jQuery Mobile编程，但我无法理解为什么此代码不起作用： <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.

我正在尝试学习如何使用jQuery Mobile编程，但我无法理解为什么此代码不起作用：

<!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>


页面标题
第一
首页
查看调用的页面
页脚
第二
第二页

页脚

非常感谢你的帮助！

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

您发布的示例与我在JSFIDLE上创建的示例（除了缺少的结束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>

用上面的块替换脚本和样式表引用，看看它是否有效。这些库托管在谷歌的内容交付网络（CDN）上。如果这样做有效，则指向这些文件的本地版本的路径是错误的，您需要更正它们

下面是一个页面，介绍文件路径：

代码不工作是什么意思？定义“不工作”。整个代码应该代表两页，当您单击“查看第二页”时应该显示第二个页面，第二个页面也应该显示同样的情况。根据我对jQuery的理解，我可以将两个或多个不同页面的代码放在同一个html文件中，并将它们逐个显示出来，隐藏其他页面。@EYN使用您的标记对我来说效果很好：您确定jQuery Mobile的路径正确吗？