Javascript jquery移动选项卡作为第二页

我有两页

<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

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

我想要的是让login div显示，用户看不到tabs div的任何部分。然后我想要完全删除login div，只显示tabs div

---

Jquery Mobile是否允许您在同一应用程序的“我的案例”页面和选项卡中混合具有不同数据角色的div？

假设您有一个类为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>

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