Question

我使用了非常轻量级的jQuery minitabs插件：

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

这是一个可爱的简单标签系统。

但是，我很难设置（在加载事件中）默认显示哪个选项卡。在我的一个标签中，我有一个搜索表单 - 如果出现表单错误，我想重新加载页面，显示右侧标签显示错误。

查看代码（不是jquery / javascript专家）看起来所有控制哪个选项卡可见的是“当前＆＃39;”选项卡上的类。并且选项卡显示：无删除...

任何拥有更多JS知识的人都可以发现最好的＆＃39;如何设置要在加载事件中显示的选项卡？

谢谢！史蒂夫

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

初始化像这样的小型标签后，您可以触发所需链接的点击方法（example）;

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

或者，如果您不介意更改原始的minitabs脚本，请参阅下文。

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;
    }
 );
}

通过这种方式，您可以使用预定义的index;

设置小型数据库

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

工作示例here

jQuery minitabs插件 - 在页面加载时以编程方式选择一个选项卡？

1 个答案: