Jquerymobile Panel 链接问题答案

【问题标题】：Jquerymobile Panel link problemsJquerymobile Panel 链接问题
【发布时间】：2013-08-28 17:13:14
【问题描述】：

我正在尝试配置滑动面板 jqm 1.3.1。我总是创建“一页-jqm”-Pages 一个 index.html 和几个

现在我试图让滑动面板工作，但是当我添加第二个页面时，页面卡在加载屏幕中。

我的代码将解释我的意思：

<!DOCTYPE html>
<html lang="de">
<head>
  ...
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

  <!-- jQuery and jQuery Mobile -->

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body>
<!-- Page 1 -->
<div data-role="page" id="page1">


  <div id="header" data-theme="c" data-role="header">
    <a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
    </a>

    <h3>Body Change</h3>

  </div>
  <div id="content" data-role="content">
    Test123
  </div>

  <div id ="footer" data-role="footer">
    footer
  </div>
  <div data-role="panel" id="menue" data-display="push" data-theme="a">
    <div data-role="controlgroup">
      <h2>Menü</h2>
      <a href="#page1" data-role="button" class="ui-btn-active">Home</a>
      <a href="#page2" data-role="button">Erlaubte Lebensmittel</a>
      <a href="#page3" data-role="button">Verbotene Lebensmittel</a>
      <a href="#page4" data-role="button">Frühstück</a>

    </div>
  </div>
<div>


<!-- Page 2 -->
<div data-role="page" id="page2">


  <div id="header" data-theme="c" data-role="header">
    <a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
    </a>

    <h3>Body Change</h3>

  </div>
  <div id="content" data-role="content">
    Test123
  </div>

  <div id ="footer" data-role="footer">
    footer
  </div>
  <div data-role="panel" id="menue" data-display="push" data-theme="a">
    <div data-role="controlgroup">
      <h2>Menü</h2>
      <a href="#page1" data-role="button" class="ui-btn-active">Home</a>
      <a href="#page2" data-role="button">Erlaubte Lebensmittel</a>
      <a href="#page3" data-role="button">Verbotene Lebensmittel</a>
      <a href="#page4" data-role="button">Frühstück</a>

    </div>
  </div>
<div>

提前感谢大家的帮助饼干182

编辑：浏览器控制台显示：未捕获的类型错误：无法读取未定义的属性“选项”

EDIT2：我忘了关闭页面Divs，非常感谢Omar

【问题讨论】：

您对两个面板使用相同的 ID。使用不同的 ID。
完成，但没有变化:(只显示加载动画。
如何打开面板？贴出所有代码。
我通过
你是这个意思吗？
如果我删除第二页，面板会正确打开，只有链接不会打开

【解决方案1】：

             I stripped your footer menu blocks and if you look at this structure it will probably help you out to why your page is not navigating to the next page... Be sure to take a look at the naming conventions as well                  pertaining to the anchor tags...     

            <!DOCTYPE html>
            <html lang="de">
            <head>
            ...
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

            <!-- jQuery and jQuery Mobile -->

            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

            </head>
            <body>
            <!-- Page 1 -->
            <section id="firstpage" data-role="page">
            <div id="header" data-theme="c" data-role="header">
            <a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info"></a>

            <h3>Body Change</h3>

            </div>
            <div id="content" data-role="content">
            <p>This is page 1</p>
            <p><a href="#secondpage">Go to second page</a></p>
            </div>

            <div id ="footer" data-role="footer">
            footer
            </div>

            <div>
            </section>

            <!-- Page 2 -->
            <div data-role="page" id="secondpage">


            <div id="header" data-theme="c" data-role="header">
            <a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
            </a>

            <h3>Body Change</h3>

            </div>
            <div id="content" data-role="content">
            this is page 2
            <p><a href="#firstpage">Go to first page</a></p>
            </div>

            <div id ="footer" data-role="footer">
            footer
            </div>
            <div>

【讨论】：