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

我的标签上有这个代码

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

我是jquery的新手。任何帮助都将不胜感激。谢谢

 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);
    });

---

，这可能就是您要查找的内容。

使用

$.mobile.changePage（hashedPage）

其中hashedPage是具有数据角色页的div的“#”+”id。

使用$.mobile.changePage（hashedPage），其中hashedPage是具有数据角色页的div的“#”+”id。$.mobile.changePage（hashedPage）这对我来说简直是个奇迹。非常感谢。我现在可以搬家了。祝你事业愉快。伙计们把它作为答案贴出来。您从未说过您正在使用JQuery Mobile，因此我没有将其作为答案发布。感谢您的回复…我没有在任何地方使用JQuery ui，因此基于jqm的示例将适用于我的案例。@结束…感谢您的回复…这正是我问题的答案。谢谢

 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);
    });