JQuery вкладки - несколько наборов на странице - PullRequest
Новая
       42

JQuery вкладки - несколько наборов на странице

1 голос
/ 31 мая 2010

Это своего рода продолжение предыдущего вопроса, который я написал, но я не смог заставить его работать ..

Я пытаюсь использовать несколько наборов вкладок (jQuery) на одной странице.

Это код, который у меня был для одного набора вкладок, который прекрасно работает: 

$('div.tabs div.tab').hide();
$('div.tabs div:first').show();
$('div.tabs ul.htabs li:first a').addClass('current');
$('div.tabs ul.htabs li a').click(function(){
    $('div.tabs ul.htabs li a').removeClass('current');
    $(this).addClass('current');
    var currentTab = $(this).attr('href');
    $('div.tabs div.tab').hide();
    $(currentTab).show();
    return false;
});

Чтобы использовать более одного набора на странице, я назначил # id для каждого набора вкладок и пытался повлиять на это с помощью: 

$.each(['#tabs-1', '#tabs-2', '#tabs-3' ], function(id) {
    $(id + 'div.tab').hide();
    $(id + 'div:first').show();
    $(id + 'ul.htabs li:first a').addClass('current');
    $(id + 'ul.htabs li a').click(function(){
        $(id + 'ul.htabs li a').removeClass('current');
        $(this).addClass('current');
        var currentTab = $(this).attr('href');
        $(id + 'div.tab').hide();
        $(currentTab).show();
        return false;
    });
});

Очевидно, что я делаю что-то здесь не так, но как новичок jQuery я в тупике!

Ответы [ 2 ]

2 голосов
/ 01 июня 2010

хорошо, так что это не сработало даже с правильным интервалом в коде, но я нашел гораздо более легкое решение, которое отлично работает - jQuery MiniTabs: 

/*
 * jQuery MiniTabs 0.1 - http://code.google.com/p/minitabs/
 */
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;
    }
 );
}

Используя этот код, вы можете добавить: 

$('#tabs-1').minitabs();
$('#tabs-2').minitabs();
$('#tabs-3').minitabs();

И все отлично работает!

1 голос
/ 31 мая 2010 
$(id + 'div.tab').hide();

Не пропущен ли пробел между id и div.tab? Это оценило бы к "#tabs-1div.tab".

...