Jquery移动选项卡作为第二页

jquery mobile tabs as 2nd page

本文关键字：二页 移动 选项 Jquery      更新时间：2023-09-26

我有两页

<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，他们输入一些数据当他们点击按钮时我显示div id=tabs

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

我想要的是有登录div显示和用户看到没有标签div的一部分。然后我想要完全删除登录div，只显示标签div。

Jquery移动允许你混合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>

和相关的js:

$(document).ready(function() {
  $('okValid').click(function () {
    $('#loginDivId').fadeOut(250);
    $('#tabs').fadeIn(250);
  }); 
});
相关文章：