jQuery UI选项卡 - 链接选项卡

Question

我想添加链接跳到我的jQuery UI选项卡上的第4步。任何人都可以看到为什么这不起作用？

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

在此先感谢您的帮助！

Answer 1

标签是从0开始索引的，所以你真的想：

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

Answer 2

好了，你的链接进入“#tofour”，这是没有在任何地方定义...

你可能需要做一些JS在链接的onClick事件来选择所需的选项卡。

Answer 3

这对我的作品与jQuery-UI-23年1月8日版本

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