Question

无论出于何种原因，此部分代码都会破坏整个应用。应用程序应该通过使用listviews在页面之间来回切换，但是这部分代码打破了它。删除此部分代码后，应用程序按预期流动。我找不到代码的错误。我可能错过了什么？感谢

以下是代码：

 <div data-role="page" id="addbasic">

  <div data-theme="a" data-role="header">
    <h3>
      Addition Basics
    </h3>
  </div>

  <div data-role="content">
    <!--<div class="example-wrapper" data-iscroll>-->

      <div align="center">
        <table border="0" cellpadding="5" cellspacing="0" id="addtable1">
          <tbody>

            <tr>
              <p align="center"><b><font color="black" face="Arial" size="4">Step 1:</font></b>
              </p>
              <td align="center"><b><font color="#FF0000" face="Arial" size="3">Set A</font></b>
              </td>
              <td align="center"><b><font color="#0000FF" face="Arial" size="3">Set B</font></b>
              </td>
            </tr> 

            <tr>
              <td align="center"><b><font face="Arial" size="3">How many<br />
                triangles are in <font color="#FF0000">Set A?</font>
                <br />
                (There are <font color="#FF0000">2</font>!)</font></b>
              </td>
              <td align="center"><b><font face="Arial" size="3">How many<br />
                triangles are in <font color="#0000FF">Set B?</font><br />
                (There are <font color="#0000FF">3</font>!)</font></b>
              </td>
            </tr>

            <tr>
              <td align="center"><b><font face="Arial">
                <img alt="Set A: 2 triangles" src="img/add/add basic/seta.png" style="border-width: 0px; border-style: solid; width: 210px; height: 125px;" /></font></b>
              </td>

              <td align="center"><b><font face="Arial">
                <img alt="Set B: 3 triangles" src="img/add/add basic/setb.png" style="border-width: 0px; border-style: solid; width: 232px; height: 129px;" /></font></b>
              </td>
            </tr>

          </tbody>
        </table>
      </div>

      <br />
      <hr >

      <div align="center">
        <table border="0" cellpadding="5" cellspacing="0" id="addtable2">
          <tbody>

            <tr>
              <p align="center"><b><font color="black" face="Arial" size="4">Step 2:</font></b>
              </p>

              <p align="center"><b><font color="black" face="Arial" size="4">Now combine them into one set!</font></b>
              </p>

              <img alt="Combined sets" src="img/add/add basic/combined.png" />

            </tr>  

          </tbody>
        </table>
      </div>

      <br />
      <hr >

      <div align="center">
        <table border="0" cellpadding="5" cellspacing="0" id="addtable3">
          <tbody>

            <tr>
              <p align="center"><b><font color="black" face="Arial" size="4">Step 3:</font></b>
              </p>

              <p align="center"><b><font color="black" face="Arial" size="4">Count how many triangles are in the new set</font></b>
              </p>

              <img alt="Combined sets" src="img/add/add basic/combined.png" />

              <p align="center"><b><font color="black" face="Arial" size="4">
                There are <font color="purple">5</font> total!
              </p>

              <img alt="Combined sets" src="img/add/add basic/equation.png" />

            </tr>  

          </tbody>
        </table>
      </div>

      <a href="#addition">Go to addition page</a>

    </div>

  <div data-theme="a" data-role="footer">
    <h1>Copyright 2015</h1>
  </div>

</div>

编辑*我不知道这是否意味着什么，但我使用Sublime文本，如果我选择代码中显示的最后一个div，它将显示它连接显示的最后一个div：

<div align="center">

不知道为什么会这样做，因为我可以为这段代码选择合适的结束div，也可以转到这个div。可能一无所获，但选择最后一个div显示

  <div data-role="page" id="addbasic">

是开场div。

Answer 1

在代码的这一部分：

<p align="center"><b><font color="black" face="Arial" size="4">
        There are <font color="purple">5</font> total!
</p>

有一个额外的字体标记未关闭并导致错误。

JQuery Mobile App - 打破整个应用程序的代码段

1 个答案: