jQuery UI Tabs - link to tab

Question

Hi There,

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

Thanks in advance for your help!

Answer 1

Well, your links go to "#tofour", which isn't defined anywhere...

You probably need to do some JS in the onClick event in the links to select the desired tab.

Answer 2

Tabs are indexed from 0, so you actually want:

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