2014-12-15 2 views
0

Я хочу запустить вкладки в пределах вкладок. это первая секция табуляции, которая работает без проблем.Как создать вкладку на другой вкладке?

<div id="tabs2" class="tabs"> 

    <ul> 
     <li class="skew-25 active"> 
      <a class="skew25" href="#"> 1 tab</a> 
     </li> 
     <li class="skew-25"></li> 
     <li class="skew-25"></li> 
    </ul> 
    <div class="tabs-pane"> 
     <div class="tab-panel active" style="display: block;"> 1 tab output</div> 
     <div class="tab-panel" style="display: none;">2 tab output</div> 
     <div class="tab-panel" style="display: none;">3 tab output</div> 
    </div> 

</div> 

Теперь включает в себя другую вкладку внутри секций (под названием «Вкладки Выход») из указанных выше:

<div id="tabs4" class="tabs tabs-vertical"> 

    <ul> 
     <li class="skew-25 active">tab within tab section</li> 
     <li class="skew-25"> 
      <a class="skew25" href="#"></a> 
     </li> 
     <li class="skew-25"></li> 
    </ul> 
    <div class="tabs-pane"> 
     <div class="tab-panel active" style="display: block;">content</div> 
     <div class="tab-panel" style="display: none;"></div> 
     <div class="tab-panel" style="display: none;"></div> 
    </div> 

</div> 

этого второй код я включить в «1 таб выхода» «выход 2 вкладки» и '3 tab output'

Проблема в том, что эфир не будет отправлять выходные данные, недоступные для выбора или неактивные при применении к вкладке на первой вкладке. Как это исправить?

Javascripts являются:

function(e) { 
    if (!$(this).parent().hasClass('active')) { 
    e.preventDefault(); 
    var ind = $(this).parent().index(); 
    tabsUl.find('li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    tabsPane.find('.tab-panel').fadeOut(0).removeClass('active'); 
    tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active'); 
    return false; 
    } else { 
    return false; 
    } 
} 

и

f = v.handle = function(e) { 
    return typeof x === i || e && x.event.triggered === e.type ? t : x.event.dispatch.apply(f.elem, arguments) 
} 

нормальный

/* ================ Tabs. ================ */ 
    $.fn.tabs = function(options) { 
     var defaults = { 
      direction: '' 
     }; 
     var options = $.extend({}, defaults, options); 
     if(options.direction == "vertical"){ 
      $(this).addClass('tabs-vertical'); 
     } 
     var tabsUl = $(this).find(' > ul'), 
      activeTab = tabsUl.find('li.active').index(), 
      tabsPane = $(this).find('.tabs-pane'); 
     tabsPane.find('.tab-panel').fadeOut(); 
     tabsPane.find('.tab-panel').eq(activeTab).fadeIn(); 
     tabsUl.find('li').find('a').click(function(e){ 
      if(!$(this).parent().hasClass('active')){ 
       e.preventDefault(); 
       var ind = $(this).parent().index(); 
       tabsUl.find('li').removeClass('active'); 
       $(this).parent().addClass('active'); 
       tabsPane.find('.tab-panel').fadeOut(0).removeClass('active'); 
       tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active'); 
       return false; 
      }else{ 
       return false; 
      } 
     }); 
    } 

ответ

Смежные вопросы