jQuery табы

Тема в разделе "JavaScript", создана пользователем Melnik_DS, 21 окт 2013.

Модераторы: ZiX
  1. Melnik_DS

    Melnik_DS Создатель

    Регистр.:
    16 ноя 2011
    Сообщения:
    16
    Симпатии:
    0
    Есть табы:
    Код:
    <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?
     
    Последнее редактирование: 22 окт 2013
  2. denik

    denik Постоялец

    Регистр.:
    1 июл 2011
    Сообщения:
    79
    Симпатии:
    43
    честно говоря, мало понятно что именно надо. вы можете разместить более не менее рабочий код здесь http://jsfiddle.net/AJdfL/ ?
    дать ссылку, а его уже будем смотреть...
     
  3. Melnik_DS

    Melnik_DS Создатель

    Регистр.:
    16 ноя 2011
    Сообщения:
    16
    Симпатии:
    0
    Решилось следующим образом:
    Код:
    <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 с видом оформления.

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