Помогите сделать вложенные вкладки на jquery

Тема в разделе "JavaScript", создана пользователем verfaa, 6 мар 2012.

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

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    373
    Симпатии:
    41
    Всем привет, делаю вкладки на jQuery и нужно в одной из вкладок сделать ещё несколько вкладок, но эти вложенные вкладки напроч отказываются у меня работать. Чтобы не выносить сюда кучу кода, я закинул пример на отдельный сайт

    http://buyexclusivejewellery.com/tabs.html
    Подскажите пожалуйста кто знает, что поправить, чтобы вложенные вкладки photos audio и video во вкладке Multimedia нормально заработали. Всем спасибо за ответы ;)
     
  2. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    http://jqueryui.com/demos/tabs/
    хотя это и так у вас используется... жалко нельзя удалять сообщения.... ща повнимательнее поглядим....
    ага...
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    получается что при клике на вложенных вкладках деактивируется родительский блок... поэтому все исчезает... попробуйте сменить название класса для вложенных вкладок и дописать функцию под них...
     
    verfaa нравится это.
  3. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    приблизительно так:
    PHP:
    //On Click Event
    $("ul.tabs li").click(function() {
     
    $(
    "ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
     
    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
    });
     
    //On Click child tabs Event
    $("ul.tabs_child li").click(function() { $("ul.tabs_child li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content_child").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content return false;
    });
    ...............................
      <
    div id="tab2" class="tab_content">
                              <!-- 
    my photos-->
     
                       
                          <
    ul class="tabs_child">
                                <
    li><a href="#tab4">photos</a></li>
                                <
    li><a href="#tab5">audio</a></li>
                              <
    li><a href="#tab6">video</a></li>
                            </
    ul>
                 
                        <
    div class="tab_container_child">
                                <
    div id="tab4" class="tab_content">
                                
    tab4  content                 
                                
    </div>                 
                                <
    div id="tab5" class="tab_content">
                              
    tab5  content
                                
    </div>
                                      <
    div id="tab6" class="tab_content">
                              
    tab6  content
                                
    </div>
                            </
    div>                     

    P.S. рабочий вариант: http://jsfiddle.net/Dinos/PysZW/
     
    verfaa нравится это.
  4. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    373
    Симпатии:
    41
    Поправил код, следуя рекоммендациям dino, теперь проблема в том. что когда загружаешь страницу и переходишь на вкладку Multimedia во вкладке photos загружается контент сразу из 3-х вложенных вкладок:
    Это скорее всего происходит из-за того, что когда переходишь на вкладку Multimedia вкладка photos не активна. Как сделать так, чтобы она была активна?

    И еще, когда кликаю по вложенным вкладкам photos audio и video в конец URL страницы добавляются #tab4 #tab5 #tab6 В принципе они не то чтобы мешают, но если можно обойтись без того чтобы они добавлялись в конец URL поскажите как :)
    И почему, если кликаю по обычным вкладкам, #tab1 #tab2 #tab3 не появляются? Всем спасибо за ответы.

    Сама страничка с примером, как и прежде тут http://buyexclusivejewellery.com/tabs.html
     
  5. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    А чего бы просто не скопипастить код моего рабочего варианта?
    Так должно быть:
    $(document).ready(function() {

    //When page loads...
    $(".tab_content, .tab_content _child").hide(); //Hide all content
    ......
     
  6. scott2to

    scott2to Создатель

    Регистр.:
    20 фев 2012
    Сообщения:
    31
    Симпатии:
    7
    Просто сделай все ненужные блокни display:none, а нужный, который изначально нужно показать пусть будет видимым.

    А что за вкладки используешь? Самопис?
     
  7. AlexMist

    AlexMist Создатель

    Регистр.:
    17 ноя 2009
    Сообщения:
    49
    Симпатии:
    7
    Вот написал, если учишься, то должен разобраться =) http://jsfiddle.net/wWd8n/1/
    Главное обрабатывать события в контексте. Там JS код которому вообще все равно на вложенность вкладок и на их количество.
    PHP:
    $(document).ready(function () {
        $(
    "div.tab_content").hide();
        $(
    "div.tab_container div.tab_content:first-child").show();
        $(
    "ul.tabs li:first").addClass("active");
            $(
    'ul.tabs > li').click(function () {
                if (!($(
    this).hasClass('active'))) {
                    var 
    thisLi = $(this);
                    var 
    numLi thisLi.index();
                    
    thisLi.addClass('active').siblings().removeClass('active');
                    
    thisLi.parent().next().children('div').hide().eq(numLi).show();
                }
        });
    });
     
  8. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    373
    Симпатии:
    41
    Нет, вкладки забрал из dating-шаблона templatemonster
     
  9. shaen

    shaen Постоялец

    Регистр.:
    23 июн 2011
    Сообщения:
    51
    Симпатии:
    9
    $('#tabs').delegate('li:not(.active)', 'click', function(){ $(this).addClass('active').siblings().removeClass('active').parents('div.page-body').find('div.tabs-box').hide().eq($(this).index()).fadeIn(150); });

    <div class="page-body">
    <div class="tabs clear-after">
    <ul id="tabs">
    <li class="active"><a>Общее</a></li>
    <li class=""><a>Дополнительно</a></li>
    </ul>
    </div>
    <div class="tabs-box visible">
    ....
    </div>
    <div class="tabs-box">
    ..
    <div>
    </div>
    .tabs-box { display: none; }
    .tabs-box.visible { display: block; }