JQuery minitabs-Plugin - Auswahl eines Tabs programmgesteuert beim Seitenaufbau?

Question

Ich verwende das wunderbar leichtgewichtige jQuery Minitabs-Plugin von:

http://code.google.com/p/minitabs/

welches ein schönes einfaches Tab-System ist.

Ich habe jedoch Schwierigkeiten festzulegen (im Load-Ereignis), welcher Tab standardmäßig angezeigt werden soll. In einem meiner Tabs habe ich ein Suchformular - und wenn es einen Formfehler gibt, möchte ich die Seite neu laden, wobei der richtige Tab angezeigt wird, um die Fehler anzuzeigen.

Beim Betrachten des Codes (ich bin kein jQuery/Javascript-Experte) scheint alles, was steuert, welcher Tab sichtbar ist, die Klasse auf dem Tab von 'current' und das Entfernen von display: none zu sein...

Kann jemand mit mehr JS-Kenntnissen den 'besten' Weg finden, um den Tab im Load-Ereignis festzulegen?

Danke! Steve

jQuery.fn.minitabs = function(speed,effect) {
  var id = "#" + this.attr('id');
  $(id + ">DIV:gt(0)").hide();
  $(id + ">UL>LI>A:first").addClass("current");
  $(id + ">UL>LI>A").click(
    function(){
      $(id + ">UL>LI>A").removeClass("current");
      $(this).addClass("current");
      $(this).blur();
      var re = /([_\-\w]+$)/i;
      var target = $('#' + re.exec(this.href)[1]);
      var old = $(id + ">DIV");
      switch (effect) {
        case 'fade':
          old.fadeOut(speed).fadeOut(speed);
          target.fadeIn(speed);
          break;
        case 'slide':
          old.slideUp(speed);  
          target.fadeOut(speed).fadeIn(speed);
          break;
        default : 
          old.hide(speed);
          target.show(speed)
      }
      return false;
    }
 );
}

Answer 1

Sie können die Click-Methode des gewünschten Links nach der Initialisierung von Minitabs wie folgt auslösen (Beispiel);

$('#container').minitabs();
$('#container>ul>li>a').eq(1).trigger('click');

Oder wenn Sie nichts dagegen haben, das ursprüngliche Minitabs-Skript zu ändern, siehe unten.

jQuery.fn.minitabs = function(index,speed,effect) {
  var id = "#" + this.attr('id');
  var $divs = $(id + ">DIV");
  $divs.not($divs.eq(index)).hide();
  $(id + ">UL>LI>A").eq(index).addClass("current");
  $(id + ">UL>LI>A").click(
    function(){
      $(id + ">UL>LI>A").removeClass("current");
      $(this).addClass("current");
      $(this).blur();
      var re = /([_\-\w]+$)/i;
      var target = $('#' + re.exec(this.href)[1]);
      var old = $(id + ">DIV");
      switch (effect) {
        case 'fade':
          old.fadeOut(speed).fadeOut(speed);
          target.fadeIn(speed);
          break;
        case 'slide':
          old.slideUp(speed);  
          target.fadeOut(speed).fadeIn(speed);
          break;
        default :
          old.hide(speed);
          target.show(speed)
      }
      return false;
    }
 );
}

Auf diese Weise können Sie Minitabs mit vordefiniertem index einrichten;

$('#container').minitabs(1);

Arbeitsbeispiel hier