JQ Touch 和 AJAX

Question

我对此有点陌生，所以如果我有点模糊，请道歉，但我会尽力而为。

我正在尝试使用 JQtouch 创建一个适用于 iphone 的网站版本。我知道通常这将在一个 HTML 文件中完成，页面由 DIV 分隔。但是，我想从网站的现有页面加载内容。

问题的下一部分是我的 iphone.html 页面与我当前的网站不在同一目录中，因此 JQtouch 的正常行为似乎不起作用。

到目前为止，我已经设置了一个页面如下：

<div id="home">
<div class="toolbar">

<h1>Title</h1></div>

<ul class="rounded">

<li class="arrow"> <a href="#content">HOME</a></li>

<li class="arrow"> <a href="#about">ABOUT US</a></li>

<li class="arrow"> <a href="#gnwr">GNWR</a></li>

<li class="arrow"> <a  href="#gner">GNER</a></li>

<li class="arrow"> <a href="#journal">NEWS</a></li>

<li class="arrow"> <a href="#FAQS">FAQS</a></li>                    

<li class="arrow"> <a href="#contact">CONTACT</a></li>


</ul>
</div>

<div id="content"></div>            
<div id="about"></div>
<div id="journal"></div>
<div id="faqs"></div>
<div id="contact"></div>


</body>
</html>

然后我有：

<script>
$(document).ready(function(){ 
$('#content').load('http://www.mysite.co.uk' + ' #content');
$('#about').load('http://www.mysite.co.uk/about' + ' #content'); 
                  }
</script>

这会加载我所追求的内容，并且页面动画效果很好。唯一的问题是我正在加载的内容中存在几个链接，点击后它们显然不起作用。

有没有一种方法可以在单击链接时检查链接的 href，如果它指向 www.mysite.co.uk/about，请将其更改为指向 #about 并强制它导航到那里？

如果您需要更多信息，请告诉我。

问候

克里斯。

Answer 1

你在一个问题中问了很多问题......你真的应该把它们分解成几个问题。人们更容易回答。无论如何，我会试一试。

首先，您不必将所有内容都放在一个 html 中；您可以通过 AJAX 加载内容。请参阅 this demo 中的 AJAX >“GET 示例”，以及通过 AJAX 加载的 page content。

据我所知，您要加载的页面不必位于相同的目录结构中。您要通过 AJAX 加载的页面需要包含有效的 jQTouch 页面，即整个页面包含在 <div> 中。

有没有办法检查href 单击时的链接以及它是否指向 到 www.mysite.co.uk/about 将其更改为 指向 #about 并强制它 导航到那里？

如果我对您的理解正确，您实际上是想用#about 替换所有指向www.mysite.co.uk/about 的链接。这必须用 jQuery 来完成：

$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');

您可能希望在每个页面加载时都这样做：

$(document).ready(function(e){
    $('body>div').bind('pageAnimationEnd', function(event, info){
        $('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
    })
});