javascript - 如何以编程方式跨选项卡移动

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 -->

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

 $('#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 , 这可能就是你要找的