使用jQuery-UI選項卡內的按鈕導航

Question

我想添加的每個選項卡內的正常Asp.Net按鈕或HTML按鈕，並嘗試使用該按鈕導航和我無法navigate.If我使用超鏈接，然後我能夠瀏覽每個標籤。

這是我現在有什麼！

http://jsfiddle.net/RaaDV/

這裏是我的代碼：

 <script> 
     $(document).ready(function() { 
     $("#tabs").tabs(); 
     }); 
     </script> 


    <div id="tabs"> 
     <ul> 
      <li><a href="#fragment-1"><span>One</span></a></li> 
      <li><a href="#fragment-2"><span>Two</span></a></li> 
      <li><a href="#fragment-3"><span>Three</span></a></li> 
     </ul> 

     <div id="fragment-1"> 
      <p>First tab is active by default:</p> 

     <a href="nexttab">Next Tab</a> 

     </div> 

     <div id="fragment-2"> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 


     </div> 

     <div id="fragment-3"> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
     </div> 
    </div> 

Answer 1

您的代碼正在與簡單地通過button更換您的a鏈接：

http://jsfiddle.net/RaaDV/126/

Answer 2

我已付出來自這個樣本紀堯姆並創建了一個新的：

http://jsfiddle.net/NSX3d/3/

HTML：

<div id="tabs"> 
    <ul> 
     <li><a href="#fragment-1"><span>One</span></a> 

     </li> 
     <li><a href="#fragment-2"><span>Two</span></a> 

     </li> 
     <li><a href="#fragment-3"><span>Three</span></a> 

     </li> 
    </ul> 
    <div id="fragment-1"> 
     <p>First tab is active by default:</p> <a class="nexttab" href="#">Next Tab</a> 
<a class="prevtab" href="#">Previous Tab</a> 

    </div> 
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <a class="nexttab" href="#">Next Tab</a> 
<a class="prevtab" href="#">Previous Tab</a> 

    </div> 
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <a class="nexttab" href="#">Next Tab</a> 
<a class="prevtab" href="#">Previous Tab</a> 

    </div> 
</div> 

JS：

$("#tabs").tabs(); 
//New version this line is $('#tabs >ul >li').size(); 
var tabCount = $("#tabs").tabs("length"); 




$("#tabs > ul > li > a").each(function (index) { 

    if (index == 0) { 
     $($(this).attr('href') + " .prevtab").hide(); 
    } 


    if (index >= tabCount - 1) { 
     $($(this).attr('href') + " .nexttab").hide(); 
    } 

}); 



$(".nexttab").click(function() { 
    //new version - active 
    var selected = $("#tabs").tabs("option", "selected"); 
    $("#tabs").tabs("option", "selected", selected + 1); 



}); 


$(".prevtab").click(function() { 
    //new version - active 
    var selected = $("#tabs").tabs("option", "selected"); 
    $("#tabs").tabs("option", "selected", selected - 1); 



}); 

它同時具有一個和上一個按鈕