使用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); 



}); 

它同时具有一个和上一个按钮