I am trying to add links to skip to step 4 on my jQuery UI tabs. Can anyone see why this is not working? ``` $(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(" Next Page » "); } if (i != 0) { prev = i; $(this).append(" « Prev Page "); } }); $('.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; })…

jQuery UI Tabs - link to tab

javascript, jquery, jquery-ui

Solution

Tabs are indexed from 0, so you actually want:

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

Problem

I am trying to add links to skip to step 4 on my jQuery UI tabs. Can anyone see why this is not working? ``` <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 »</span></a>"); } if (i != 0) { prev = i; $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'><span>« 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> ``` Thanks in advance for your help!

Original source