jQuery UI 탭 - 탭에 연결

jQuery UI 탭의 4 단계로 건너 뛰는 링크를 추가하려고합니다. 왜 이것이 작동하지 않는지 알 수 있습니까?jQuery UI 탭 - 탭에 연결

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/js/jquery-ui-1.7.custom.min.js"></script> 
<script type="text/javascript"> 
$(function() { 

      var $tabs = $('#tabs').tabs(); 

      $(".ui-tabs-panel").each(function(i){ 

       var totalSize = $(".ui-tabs-panel").size() - 1; 

       if (i != totalSize) { 
        next = i + 2; 
        $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'><span>Next Page &#187;</span></a>"); 
       } 

       if (i != 0) { 
        prev = i; 
        $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'><span>&#171; Prev Page</span></a>"); 
       } 

      }); 

      $('.next-tab, .prev-tab').click(function() { 
        $tabs.tabs('select', $(this).attr("rel")); 
        return false; 
       }); 
     }); 
$(document).ready(function(){ 
var $tabs= $("#tabs").tabs(); 
$('.tofour').click(function() { // bind click event to link 
    $tabs.tabs('select', 4); // switch to third tab 
    return false; 
}); 
}); 
    </script> 

<div id="tabs"> 
    <ul> 
    <li id="tabone"><a href="#fragment-1">one</a></li> 
    <li id="tabtwo"><a href="#fragment-2">two</a></li> 
    <li id="tabthree"><a href="#fragment-3">three</a></li> 
    <li id="tabfour"><a href="#fragment-4">four</a></li> 
    </ul> 
    <div id="fragment-1" class="ui-tabs-panel"> 
    <p>Test content here</p> 
    <div class="save-progress">You cansave your <br> 
     progress at <a href="#tofour" class="tofour">step 4</a></div> 
    </div> 
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"> 
    <p>Test content here for secon tab</p> 
    <div class="save-progress">You cansave your <br> 
     progress at <a href="#tofour" class="tofour">step 4</a></div> 
    </div> 
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"> 
    <p>Test content here for 3rd tab</p> 
    <div class="save-progress">You cansave your <br> 
     progress at <a href="#tofour" class="tofour">step 4</a></div> 
    </div> 
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide select-cats"> 
    <p>Test content for tab 4</p> 
    <input type="image" src="/images/big-green-submit-btn_03.gif" class="submit-show-btn cat_button" value="Submit" id="catcustomcontentbutton" /> 
    <div class="clr"></div> 
    </div> 
</div>

미리 도움을 청하십시오.

출처

2010-01-19 Jackson

다음을 사용하여 탭 변수를 설정할 수 있습니다 VAR를 $ tabs = $ ("# tabs"); 그런 식으로 한 번만 초기화하려고합니다. – Ajw

탭은 0에서 색인, 그래서 당신은 실제로 원하는 :

$('.tofour').click(function() { // bind click event to link 
    $tabs.tabs('select', 3); // switch to fourth tab 
    return false; 
});

출처

2010-01-19 09:38:23 Ajw

완료! 고맙습니다! 나는 그것이 간단하다는 것을 알았다. 내 머리를 들여다보고 있었다. – Jackson

글쎄, 당신의 연결은 당신은 아마 원하는 탭을 선택 링크에 onClick 이벤트에서 일부 JS을 할 필요가 어디 정의되지 않은 "#tofour"...

로 이동합니다.

출처

2010-01-19 09:25:14

이 JQuery와-UI-1.8.23 버전으로 나를 위해 작동

$('.tofour').click(function() { 
    $("#tabs").tabs('select',3); 
    return false; 
});

출처

2012-09-11 23:55:08 LaBE

jQuery UI 탭 - 탭에 연결

답변

관련 문제