我有几个项目 html，每个都包含一个 JQM 页面。我还有一个索引页。它是一个多 JQM 页面的 html，每个 JQM 页面作为列出项目的类别。
index.html item1.html item2.html
+------------------+ +--------+--------+ +--------
|+-------+ | +--|Cat. | Next|->|Cat.
||.cont- | | | +--------+--------+ |--------
||ent |+-------+|<----+ | | |
|+-------+|#cat1 || | | |
| | || |bla bla bla | |bla bla
| |link1+---------->| | |
| |link2 || | | |
| +-------+| +-----------------+ +--------
|+-------++-------+|
||#cat2 ||#cat3 ||
|| || ||
||link4 ||link3 ||
|| || ||
|+-------++-------+|
+------------------+
目前我可以从索引链接到项目，并顺利加载 ajax。但是我意识到，如果我想从项目链接回索引#cat1，我需要使用data-ajax='false'因为索引是一个多页html。（我不能使用data-rel='back'因为上一页并不总是索引.html）。
如果我使用 ajax='false' ，如果我经常在列表和项目之间切换，我会失去平滑过渡（每次切换回列表都是完全重新加载）。 例如：
full-load-> index#cat1 -ajax-load-> item2 -full-load（Again）-> index#cat1
问题
我想要：
-full-load-> index#cat1 -ajax-load-> item2 -ajax-switch-to-already-loaded-> index#cat1
如何覆盖 jquery 移动逻辑，以便在单击data-ajax='false'链接时，它首先搜索以查看该 index#cat1 页面是否已在 dom 中？如果是，则只需切换到该 JQM 页面即可。如果它不存在，请在没有 ajax 的情况下完全加载 index#cat1（如默认行为）。
请记住，用户可以从 item1.html 开始，然后导航到 index.html#cat1。
我知道我需要用一些自定义属性标记每个 JQM 页面，例如 data-full-url="index.html#cat1" 以便更轻松地搜索现有页面。然而，我的主要弱点是如何改变现有的Jquery Mobile链接逻辑。
我已经在以下小提琴中创造了你的情况。
1）索引页：http://jsfiddle.net/nachiket/RpZW7/
2）详情项目页面：http://jsfiddle.net/nachiket/cHmhW/（这个已经在索引页小提琴中链接）
我没有使用data-ajax='false'，它能解决你的问题吗？如果没有，请将此小提琴更新到您的确切情况，以便更好地提供帮助。
jsfiddle 似乎向下，这与你的例子很接近吗？
我把它放在本地服务器中
对于 item1 的后退按钮，您可以输入完整的 url：http://localhost/home.html#cat1 ，它也可以工作
首页.html：
<!doctype html>
<html manifest="">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link type="text/css">
</link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-theme="b" data-role="header" data-position="fixed">
<h3>home</h3>
</div>
<div data-role="content">
hello home
<a href="home.html#cat1" type="button">cat1</a>
<a href="home.html#cat2" type="button">cat2</a>
</div>
</div>
<div data-role="page" id="cat1">
<div data-theme="b" data-role="header" data-position="fixed">
<h3>cat1</h3>
</div>
<div data-role="content">
hello cat1
<a href="#home" type="button">home</a>
<a href="item1.html" type="button">see item1</a>
</div>
</div>
<div data-role="page" id="cat2">
<div data-theme="b" data-role="header" data-position="fixed">
<h3>"cat2</h3>
</div>
<div data-role="content">
hello cat2
<a href="#home" type="button">home</a>
</div>
</div>
</body>
</html>
项目1.html
<!doctype html>
<html manifest="">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link type="text/css">
</link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="item1Home">
<div data-theme="b" data-role="header" data-position="fixed">
<h3>item1's home</h3>
</div>
<div data-role="content">
hello item1
<a href="home.html#cat1" type="button" rel="external">back?</a>
</div>
</div>
</body>
</html>