3

我正在尝试配置滑动面板 jqm 1.3.1。我总是创建“一页-jqm”-一页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>

我提前感谢大家的帮助cracker182

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

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

4

1 回答 1

0 
             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>
于 2013-10-11T22:22:15.313 回答