jQuery移动选项卡作为第二页

Question

我有2页

<div data-role="page" align="center" id="loginDivId">
</div>

<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#tabs-1">Tab 1</a></li>
      <li><a href="#tabs-2">Tab 2</a></li>
      <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
  </div>
</div>

本质上，我向用户显示loginDivId，他们输入一些数据，当他们点击按钮时，我用id = tabs显示div

问题是，我可以在登录屏幕上向上滑动并查看选项卡屏幕。 这既是登录之前，也是登录之后。

我要显示的登录div和用户看不到标签div的任何部分。 然后，我想完全删除登录div，仅显示选项卡div。

Jquery Mobile是否允许您在同一应用程序中将div与不同的数据角色（在我的情况下为页面和标签）混合使用？

Answer 1

假设您有一个按钮的类为okValid ：

<div data-role="page" align="center" id="loginDivId">
    <button type="button" class="okValid">Ok</button>
</div>

<div data-role="tabs" id="tabs" style="display:none;>
  <div data-role="navbar">
    <ul>
      <li><a href="#tabs-1">Tab 1</a></li>
      <li><a href="#tabs-2">Tab 2</a></li>
      <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
  </div>
</div>

与js相关联：

$(document).ready(function() {
  $('okValid').click(function () {
    $('#loginDivId').fadeOut(250);
    $('#tabs').fadeIn(250);
  }); 
});