Question

我差不多完成了我网站的移动版本，并且遇到了一个主要障碍。我的页面有一个正确的jQuery移动窗格和一个左窗格。右侧窗格用于站点范围的导航，并且所有链接都有效。左侧窗格用作目录，允许用户从任何地方上下跳转页面，但其链接都不起作用。

左侧的链接是指向<hr>元素ID的链接，如下所示：

<a href="#kgmap" class="menu">Map</a>

右侧的链接是指向其他页面的相对链接：

<a href="index.htm" class="menu">Home</a>

链接位于面板div中，标题位于内容div中。我尝试使用data-ajax="false"属性来阻止链接作为外部处理，但无济于事。

以下是代码的简化版本，仅包含有问题元素的示例：

<body>
  <div data-url="panel-responsive-page1" data-role="page" class="jqm-demos ui-responsive-panel" id="panel-responsive-page1" data-title="Example">
    <div data-role="header" id="main_header">
      <span>Header</span>
      <a href="#add-form">Menu</a>
    </div><!-- /header -->
    <div role="main" class="ui-content jqm-content jqm-fullwidth" id="content">
      <div data-demo-html="#panel-responsive-page1">
        <table width="100%" id="main" style="margin-top:45px">
          <tr>
            <td align="center" valign="middle"><hr id="idfoo" color="purple" width="90%" size="3px">
            </td>
          </tr>
        </table>
      </div><!--/demo html-->
    </div><!-- /content -->
    <div data-role="panel" data-display="overlay" data-theme="b" id="nav-panel" data-position-fixed="true" data-ajax="false">
      Tap TOC button to close<br>
      <a href="#idfoo">Foo</a>
    </div><!-- /panel -->
    <div data-role="panel" data-position="right" data-display="overlay" data-theme="a" id="add-form" data-position-fixed="true">
      Tap Menu (&#9776;) button to close<br>
      <a href="notawebsite.htm">Lorem Ipsum</a>
    </div><!-- /panel -->
  </div>
</body>

以下是我目前所拥有的链接：http://www.kgcrittersitters.com/m/index.htm

网站上的所有页面看起来都相同，但即使点击时没有明显的变化，菜单面板链接也能正常工作。我简单地认为没有必要复制我桌面网站的其他内容，因为我可能需要重写所有内容以便ID链接正常工作。

我也知道配色方案是眼睛灼热的，我的CSS使用的!important标签太多了，但这是我客户的要求，而不是我的想法。我建议将浏览器窗口的大小调整为480px，320px或240px宽度，以达到预期的外观。

如何从jQuery菜单面板<div>？</div>链接到内容div中的标题

0 个答案: