Question

我是jQTouch的新手 - 它非常棒 - 但是我发现即使我正在关注，我也无法让它为我的HTML开箱即用getting started指南以及markup guidelines。

具体来说，我的每个屏幕都是<section>元素（<body>的直接子元素），具有唯一ID，我有这些ID的链接，例如<a href="#screen-a">。这似乎遵循演示代码的惯例，但演示代码仍然有效，而我的代码却没有。

以下是我<body>的HTML结构：

<section id="main-menu">
    <header class="toolbar"><!-- ... --></header>
    <nav>
        <ul>
            <li class="arrow"><a href="#screen-a">Screen A</a></li>
            <li class="arrow"><a href="#screen-b">Screen B</a></li>
            <li class="arrow"><a href="#screen-c">Screen C</a></li>
        </ul>
    </nav>
    <footer><!-- ... --></footer>
</section>

<section id="screen-a"><!-- ... --></section>
<section id="screen-b"><!-- ... --></section>
<section id="screen-c"><!-- ... --></section>

<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>

<script src="init.js"></script>

我的init.js只是初始化jQTouch（没有自定义选项）：

var jQT = new $.jQTouch({});

当我加载页面时，UI显示正常，我可以确认jQTouch已初始化，因为我的jQT变量存在。

但是当我点击任何链接时，位置栏会更改为新的哈希值（例如“＃screen-a”），但UI不会更改。并且JavaScript控制台开始重复多次无历史记录错误。

（当我使用未经明细化的jQTouch.js时，这些错误来自jQTouch goBack()函数内部，该函数是从dumbLoopStart()计时器调用的。）

请注意，在桌面Safari和iPhone上的Mobile Safari中都会出现这种情况。但这很奇怪，因为他们的demo对我来说都很好。

我几个小时都没碰到我的头，无济于事。有没有人对我可能做错了什么有想法，建议或提示？谢谢！

Answer 1

我根据您提供的示例创建了一个测试（添加了样式导入）。只需删除＆lt; nav＆gt;元素为我解决了这个问题。

Answer 2

我相信你的主要元素必须是div。此外，您需要在div上首先显示一类“当前”。我不知道你使用的版本是否需要这个版本，但是我之前通过git提取的内容要求所有主要元素都包含在id为“jqt”的div中。

<div id="jqt">
   <div id="main-menu" class="current">
       <ul>
           <li class="arrow"><a href="#screen-a">Screen A</a></li>
           <li class="arrow"><a href="#screen-b">Screen B</a></li>
           <li class="arrow"><a href="#screen-c">Screen C</a></li>
       </ul>
   </div>

   <div id="screen-a"><!-- ... --></div>
   <div id="screen-b"><!-- ... --></div>
   <div id="screen-c"><!-- ... --></div>
</div>

<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>

为什么jQTouch不能为我的HTML开箱即用？

2 个答案: