jQuery табы

[Melnik_DS]

Есть табы:

<div class="section">
    <ul class="tabs">
        <li class="current">НОВИНКИ</li>
        <li>ОБНОВЛЕНИЯ</li>
        <li>ТОП НЕДЕЛИ</li>
    </ul>

<ul class="i-tab">
    <li class="mg"></li>
    <li class="mg2"></li>
    <li class="mg3"></li>
</ul>

  <div class="box visible">
    <ul class="tab-content">
        <li>{custom category="1-29" template="custom-content1" aviable="global" from="0" limit="30" cache="no"}</li>
        <li>{custom category="1-29" template="custom-content4" aviable="global" from="0" limit="30" cache="no"}</li>
        <li>{custom category="1-29" template="custom-content2" aviable="global" from="0" limit="30" cache="no"}</li>
    </ul>
    </div>
    <div class="box">
    <ul class="tab-content">
        <li>{custom category="1-29" template="custom-content1" aviable="global" from="0" limit="30" cache="no"}</li>
        <li>{custom category="1-29" template="custom-content4" aviable="global" from="0" limit="30" cache="no"}</li>
        <li>{custom category="1-29" template="custom-content2" aviable="global" from="0" limit="30" cache="no"}</li>
    </ul>
    </div>
    <div class="box rated">
    <ul class="tab-content">
        <li>{custom category="1-29" template="custom-content1" aviable="global" from="0" limit="30" cache="no"}</li>
        <li>{custom category="1-29" template="custom-content4" aviable="global" from="0" limit="30" cache="no"}</li>
        <li>{custom category="1-29" template="custom-content2" aviable="global" from="0" limit="30" cache="no"}</li>
    </ul>
    </div>
</div>

Реализация:

  $('ul.tabs').delegate('li:not(.current)', 'click', function() {
     $(this).addClass('current').siblings().removeClass('current')
       .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(450);
   })
// Добавим сразу же видимость первым элементам табов
    $('ul.i-tab li:first').addClass ('active');
    $('ul.tab-content li:first').css ('display', 'block');
    // Добавим «кликнотому» элементу класс .active
    $('ul.i-tab').delegate('li:not(.active)', 'click', function() {
        // И удалим у предыдущего
        $(this).addClass('active').siblings().removeClass('active')
            .parents('div.section').find('ul.tab-content li').hide()
            // Посчитаем по какому по счету табу мы кликнули
            // и откроем соотвествующий элемент
            .eq($(this).index()).fadeIn('slow');
    })

Т.е при нажатии на любой из .i-tab li, открывается соответствующий .tab-content li, но он открывается только в первом(одном) <div class="box visible">, а нужно что б во всех <div class="box">, т.е смысл в том, что б за один клик делать выборку во всех табах а не только в одном.

Подскажите, что нужно подправить в коде jquery?

 

[denik]

честно говоря, мало понятно что именно надо. вы можете разместить более не менее рабочий код здесь Для просмотра ссылки Войди или Зарегистрируйся[/URL] ?
дать ссылку, а его уже будем смотреть...

 

[Melnik_DS]

Решилось следующим образом:

<div class="section">
    <ul class="tabs">
        <li class="current">НОВИНКИ</li>
        <li>ОБНОВЛЕНИЯ</li>
        <li>ТОП НЕДЕЛИ</li>
    </ul>
<ul class="i-tab" id="mg-wrap">
    <li class="mg"></li>
    <li class="mg2"></li>
    <li class="mg3"></li>
</ul>
<div class="box visible">
    <ul class="tab-content">
        <li class="mg_ct">{custom category="1-29" template="custom-content4" aviable="global" from="0" limit="30" cache="no"}</li>
        <li class="mg_ct2">{custom category="1-29" template="custom-content4" aviable="global" from="0" limit="30" cache="no"}</li>
        <li class="mg_ct3">{custom category="1-29" template="mosaic" aviable="global" from="0" limit="30" cache="no"}</li>
    </ul>
    </div>
    <div class="box">
    <ul class="tab-content">
        <li class="mg_ct">{custom category="1-29" template="custom-content4" aviable="global" from="0" limit="30" cache="no"}</li>
        <li class="mg_ct2">{custom category="1-29" template="custom-content4" aviable="global" from="0" limit="30" cache="no"}</li>
        <li class="mg_ct3">{custom category="1-29" template="mosaic2" aviable="global" from="0" limit="30" cache="no"}</li>
    </ul>
    </div>
    <div class="box rated">
    <ul class="tab-content">
        <li class="mg_ct">{custom category="1-29" template="custom-content4" aviable="global" from="0" limit="30" cache="no"}</li>
        <li class="mg_ct2">{custom category="1-29" template="custom-content4" aviable="global" from="0" limit="30" cache="no"}</li>
        <li class="mg_ct3">{custom category="1-29" template="mosaic" aviable="global" from="0" limit="30" cache="no"}</li>
    </ul>
    </div>
</div>

$('ul.tabs, ul.tabs2').delegate('li:not(.current)', 'click', function() {
        $(this).addClass('current').siblings().removeClass('current')
            .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(450);
    });

$('ul.tab-content li.mg_ct').show();

    $('.mg').click(function() {
$(this).parents('div.section').find("ul.tab-content li").hide();
      $('ul.tab-content li.mg_ct').fadeIn('slow');
  });
  $('.mg2').click(function() {
$(this).parents('div.section').find("ul.tab-content li").hide();
      $('ul.tab-content li.mg_ct2').fadeIn('slow');
  });
  $('.mg3').click(function() {
$(this).parents('div.section').find("ul.tab-content li").hide();
      $('ul.tab-content li.mg_ct3').fadeIn('slow');
  });

Нужно это для переключения содержимого в табах. {custom category="1-29" template="mosaic" aviable="global" from="0" limit="30" cache="no"} - это тэг отвечающий за вывод новостей в datalife engine. В зависимости от клика на одну из кнопок (прямоугольные иконки правее ссылок на картинке) в:

 <ul class="i-tab" id="mg-wrap">
    <li class="mg"></li>
    <li class="mg2"></li>
    <li class="mg3"></li>
</ul>

Открывается соответствующий mg_ct с видом оформления.

Если это можно сделать гораздо лучше, был бы рад увидеть более эффективную реализацию.