使用上一個/下一個按鈕控制jQuery選項卡

Question

我正在通過按鈕點擊功能控制選項卡。我希望用戶按順序瀏覽標籤。每個選項卡都有不同的html表單。所以按鈕也提供了驗證。但主要問題是下一個&以前的按鈕根本不起作用。按鈕怎麼沒有改變標籤呢？

jQuery的

<script type="text/javascript"> 
    $(".nexttab").click(function() { 
     var selected = $("#tabs").tabs("option", "selected"); 
     $("#tabs").tabs("option", "selected", selected + 1); 
    }); 

    $(".backtab").click(function() { 
     var selected = $("#tabs").tabs("option", "selected"); 
     $("#tabs").tabs("option", "selected", selected - 1); 
    }); 
</script> 

HTML

<div id="convertThis"> 
    <div id="tabs"> 
     <div href="#a" rel="a" title="./images/icons/category1.png">Category 1</div> 
     <div href="#b" rel="b" title="./images/icons/category2.png">Category 2</div> 
    </div> 

    <div id="divs"> 
     <div id="a"> 
       <form action="" method="post"> 
       CATEGORY 1 FORM CONTENT 
        <div class="tabController"> 
         <div class="tabNext"> 
         <input type="button" class="nexttab" value="Next &gt;&gt;" name="submit" id="submit" style="background: #EFEFEF; float:right;"/> 
         </div> 
        </div> 
       </form> 
     </div> 
     <div id="b"> 
      <form action="" method="post" id="post2"> 
        CATEGORY 2 FORM CONTENT 
       <div class="tabController"> 
        <div class="tabBack"> 
         <input type="button" class="backtab" value="&lt;&lt; Previous" name="submit2" id="submit2" style="background: #EFEFEF;"/> 
        </div> 
       <div class="tabNext"> 
         <input type="button" class="nexttab" value="Next &gt;&gt;" name="submit" id="submit" style="background: #EFEFEF; float:right;"/> 
       </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

Answer 1

也許是因爲你的按鈕式 「submit」，他們強制頁面的刷新？嘗試將它們更改爲<input type="button" ... />

此外，擺脫按鈕周圍的<a>標籤。

使用按鈕<input type='button'>或鏈接<a href='...'>text</a>，有一個鏈接包裝一個按鈕沒有意義。