JQuery-Ui TABS 내에서 버튼을 사용하여 내비게이션

Question

각 탭 안에 정상적인 Asp.Net 버튼 또는 HTML 버튼을 추가하려고하는데 해당 버튼을 사용하여 탐색하려고하면 탐색 할 수 없습니다. 하이퍼 링크를 사용하면 각 탭을 탐색 할 수 있습니다.

내가 지금하고있는 것은 무엇입니까? 여기

http://jsfiddle.net/RaaDV/

내 코드입니다 :

귀하의 코드는 단순히 button하여 a 링크를 교체와 함께 일하고있다

 <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

:

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

Answer 2

내가이 샘플에서 갈래있다 Guillaume 님이 새 앨범을 만들었습니다 :

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



}); 

그것은 다음 및 이전 단추를 모두