我正在开发我的第一个移动应用程序，但无法使用正确的导航栏按钮

Question

我正在使用 Dreamweaver CS6，并附上了下面的代码。我将所有 jquery 文件更新到最新版本。当我进入实时视图时，我可以单击前两个按钮，但第三个按钮在任一页面上都不起作用，并且右侧没有干净的边缘。css或者代码本身有问题吗？谢谢

我正在使用 Dreamweaver CS6，并附上了下面的代码。我将所有 jquery 文件更新到最新版本。当我进入实时视图时，我可以单击前两个按钮，但第三个按钮在任一页面上都不起作用，并且右侧没有干净的边缘。css或者代码本身有问题吗？谢谢

<!--Safety Home Page Starts Here -->
<div data-role="page" id="safety_home" data-theme="c">
  <div data-role="header" data-theme="c">
    <h1>GGM Mobile</h1>
    <div data-role="navbar" data-theme="c"><ul>
      <li><a href="#safety_home" class="ui-btn-active">Home</a></li>
      <li><a href="#safety_topic">Topics</a></li>
      <li><a href="#safety_report">Report</a></li>
    </ul></div>
  </div>
  <div data-role="content" data-theme="c">
    <p>Home</p>
  </div>
  <div data-role="footer" data-theme="c">
    <h4>Gothic Grounds Management, Inc. &copy; 2012</h4>
  </div>
</div>
    <!--Safety Home Page Ends Here -->
    <!--Safety Topic Page Starts Here -->
<div data-role="page" id="safety_topic" data-theme="c">
  <div data-role="header" data-theme="c">
    <h1>GGM Mobile</h1>
    <div data-role="navbar" data-theme="c"><ul>
      <li><a href="#safety_home">Home</a></li>
      <li><a href="#safety_topic" class="ui-btn-active">Topic</a></li>
      <li><a href="#safety_report">Report</a></li>
    </ul>
    </div>
  </div>
  <div data-role="content" data-theme="c">
    <p>Topics</p>
  </div>
  <div data-role="footer" data-theme="c">
    <h4>Gothic Grounds Management, Inc. &copy; 2012</h4>
  </div>
    <!--Safety Topics Page Ends Here -->
    <!--Safety Incidents Page Starts Here -->
<div data-role="page" id="safety_report" data-theme="c">
  <div data-role="header" data-theme="c">
    <h1>GGM Mobile</h1>
    <div data-role="navbar" data-theme="c"><ul>
      <li><a href="#safety_home">Home</a></li>
      <li><a href="#safety_topic">Topics</a></li>
      <li><a href="#safety_report" class="ui-btn-active">Report</a></li>
    </ul>
    </div>
  </div>
  <div data-role="content" data-theme="c">
    <p>Topics</p>
  </div>
  <div data-role="footer" data-theme="c">
    <h4>Gothic Grounds Management, Inc. &copy; 2012</h4>
  </div>
    <!--Safety Incident Page Ends Here -->

Answer 1

是的，你的第二页和第三页没有结束 </div> 标签。您可能想尝试使用验证器来帮助发现此类问题。这是通过验证器运行代码时看到的类型。

第 38 行，第 56 列：未封闭的元素 div。

<div data-role="page" id="safety_report" data-theme="c">

第 20 行，第 55 列：未封闭的元素 div。

<div data-role="page" id="safety_topic" data-theme="c">

HTML5 验证器

1. http://validator.w3.org/
2. http://html5.validator.nu/

我希望这有帮助。