Question

我的标签有这个代码......

    <!-- Start first page -->
        <div data-role="page" id="homePage" data-dom-cache="true" data-rel="dialog">    
            <div data-role="header" data-position="fixed" data-id="header">
        </div>

        <div data-role="navbar">
            <ul>
            <li><a href="#homePage" class="ui-btn-active ui-state-persist"  >Enter data</a></li>
            <li><a href="#syncData" >Sync data</a></li>
                <li><a href="#manageData">Manage data</a></li>
            </ul>
        </div><!-- /navbar -->
     </div> <!-- /header -->

  </div><!-- /page -->

  <!-- Start second page -->
     <div data-role="page" id="syncData" data-rel="dialog" data-dom-cache="true">
         <div data-role="header" data-id="header1" data-position="fixed">
     </div>
     <div data-role="navbar">
        <ul>
            <li><a href="#homePage">Enter data</a></li>
            <li><a href="#syncData"  class="ui-btn-active ui-state-persist" >Sync data</a></li>
            <li><a href="#manageData">Manage data</a></li>
        </ul>
     </div><!-- /navbar -->
   </div><!-- /header -->
 </div><!-- /page -->

   <!-- Start third page -->
      <div data-role="page" id="manageData" data-rel="dialog" data-dom-cache="true">
          <div data-role="header" data-id="header2" data-position="fixed">
      </div>
      <div data-role="navbar">
          <ul>
             <li><a href="#homePage">Enter data</a></li>
             <li><a href="#syncData" >Sync data</a></li>
             <li><a href="#manageData" class="ui-btn-active ui-state-persist" >Manage data</a></li>
          </ul>
      </div><!-- /navbar -->
   </div> <!-- /header -->
   <div data-role="popup" id="dialog-confirm" style="display: none" data-overlay-theme="b" data-theme="b">
      <div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
     <h3 class="ui-title">Low storage space!!</h3>
     <p>You must perform one of the actions below before you proceed!.</p>
        <a href="#" data-role="button" data-inline="true" id="syncDataId" data-theme="c">Sync data</a>    
        <a href="#" data-role="button" data-inline="true" id="backupDataId" data-theme="c">Backup data</a>  
            <a href="#" data-role="button" data-inline="true" id="increaseStorageSpaceId" data-theme="c">Increase storage space</a>  
            <a href="#" data-role="button" data-inline="true" id="cancelId" data-theme="c">Cancel</a>  
     </div>
      </div>
   </div><!-- /page -->

我想更改为同步数据，我点击管理数据选项卡上弹出对话框中的同步数据按钮。它应该发生在点击按钮事件上 e.g

 $('#syncDataId').click(function () {       
    //change to the sync data tab page
 }

是jquery的新手。任何帮助都会受到赞赏。谢谢

Answer 1

 jQuery('.next-product').click(function() {
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected + 1 === amount ? 0 : selected + 1);
    });

    jQuery('.previous-product').click(function() {
        debugger;
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected === 0 ? amount - 1 : selected - 1);
    });

live demo，这可能就是你要找的东西

Answer 2

使用$.mobile.changePage(hashedPage)，其中hashedPage是具有数据角色页的div的'＃'+'id。

如何以编程方式跨标签移动

2 个答案: