JQ触摸和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 加载内容。请参阅 AJAX > 此演示中的“GET 示例”，以及 页面内容通过AJAX加载。

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

中。

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

如果我理解正确的话，您本质上是想将 www.mysite.co.uk/about 的所有链接替换为 #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');
    })
});