jQuery Nested Tabs first tab doesn't work until you click it

Question

Using this bit of code to create tabs and nested tabs works great except for the very first nested tab will not work unless you click on one of the other nested tabs then click back to the first one... Any ideas?

jQuery.fn.tabs = function () {
  return this.each(function () {
    var ul = jQuery(this);



    ul.find('a[href^=#]').each(function (i) {
      var tablink = jQuery(this);

      if (i) {
        jQuery(tablink.attr('href')).hide();

      }
      else {
        tablink.addClass('current');
      }

      tablink.click(function () {
        jQuery(ul.find('a.current').removeClass('current').attr('href')).hide();
        jQuery(tablink.addClass('current').attr('href')).show();
        if(tablink.attr('rel')){
          $("#tab-preloader").show();
          $.ajax(
            {
              url: tablink.attr('rel'),
              cache: false,
              success: function(message)
              {
              jQuery(tablink.attr('href')).empty().append(message);
              $("#tab-preloader").hide();
              }
            });
        };

        return false;
      });
    });
  });
};

Also I don't know if it is related but I'm pulling all the content for the nested tabs in with the rel "funtion". The menu looks like this:

<li><a href="#tab1-b" rel="29623/static.html?nocache=true">Sports & Racing</a></li>
 <li><a href="#tab1-c" rel="29681/static.html?nocache=true">Shooters</a></li>

 <li><a href="#tab1-d" rel="29688/static.html?nocache=true">Kids & Family</a></li>

Please forgive my lack of knowledge, I'm very new at the whole jquery thing. Thanks agian!

Answer 1

If I understand correctly, you wish to load the first tab by default. You can do it by triggering its click event, for example:

tablink.click(function () {
        //...
        });

//move down
if (i) {
    jQuery(tablink.attr('href')).hide();
}
else {
    tablink.click(); // will also add the class
}

If you don't want to change the code, simply run this from somewhere in your code, after you've called tabs():

$('a.current').click();