私の jQuery モバイル (v 1.2) Web サイトには、いくつかの個別のページがあります (つまり、各ページには 1 つのヘッダー、コンテンツ、およびフッターがあります)。問題は、ページをリンクできないことです。次の行は機能していません。
<a href="anotherpage.html">Another Page</a>
「ページの読み込みエラー」が表示されます。
要素に追加rel="external"
すると機能します。<a>
ただし、Ajax による自動読み込みはオフになります。しかし、Ajax ローディングを使用し、ページを分離したいと考えています。それが可能かどうか疑問に思っています。
コード ページ 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<a href="b.html"> click me</a>
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
コード ページ 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
page 2 content
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>