jQuery tabs-content in non active tab spanning целая страница, создающая пробел ниже нижнего колонтитула

Question

Для создания окна с вкладками я использую следующий код. Существует одна вкладка с большим количеством контента, и когда эта вкладка не активна, есть тонна пробела ниже нижнего колонтитула. По сути, контент на самом деле не скрывается, когда он неактивен, и мне это нужно. Я включил базовый код вместе с js-скриптом.

Я пробовал настраивать высоту и переполнение, чтобы прокручивать, но не очень доволен этим. Буду признателен за любую оказанную помощь.

Вот скелет кода для справки:

<div class="product-collateral"> 
    <ul class="tabset"> 
     <li class="active"><a href="#tab1">Tab 1</a></li> 
     <li><a href="#tab2">Tab 2</a></li> 
     <li><a href="#tab3">Tab 3</a></li> 
     <li><a href="#tab4">Tab 4</a></li> 
     <li><a href="#tab5">Tab 5</a></li> 
     <li><a href="#tab6">Tab 6</a></li> 
     <li><a href="#tab7">Tab 7</a></li> 
    </ul> 
    <div class="box-collateral tab-content"> 

     <div id="tab1">       
     </div> 

     <div id="tab2"> 
     </div> 

     <div id="tab3"> 
     </div> 

     <div id="tab4"> 
     </div> 

     <div id="tab5"> 
     </div> 

     <div id="tab6"> 
     </div> 

     <div id="tab7"> 
     </div> 

    </div><!-- /box-collateral tab-content --> 
</div><!-- /product-collateral --> 

И вот JS скрипт

/* 
* jQuery Tabs plugin 
*/ 
;(function($){ 
    $.fn.contentTabs = function(o){ 
     // default options 
     var options = $.extend({ 
      activeClass:'active', 
      addToParent:false, 
      autoHeight:false, 
      autoRotate:false, 
      checkHash:false, 
      animSpeed:400, 
      switchTime:3000, 
      effect: 'none', // "fade", "slide" 
      tabLinks:'a', 
      attrib:'href', 
      event:'click' 
     },o); 

     return this.each(function(){ 
      var tabset = $(this), tabs = $(); 
      var tabLinks = tabset.find(options.tabLinks); 
      var tabLinksParents = tabLinks.parent(); 
      var prevActiveLink = tabLinks.eq(0), currentTab, animating; 
      var tabHolder; 

      // handle location hash 
      if(options.checkHash && tabLinks.filter('[' + options.attrib + '="' + location.hash + '"]').length) { 
       (options.addToParent ? tabLinksParents : tabLinks).removeClass(options.activeClass); 
       setTimeout(function() { 
        window.scrollTo(0,0); 
       },1); 
      } 

      // init tabLinks 
      tabLinks.each(function(){ 
       var link = $(this); 
       var href = link.attr(options.attrib); 
       var parent = link.parent(); 
       href = href.substr(href.lastIndexOf('#')); 

       // get elements 
       var tab = $(href); 
       tabs = tabs.add(tab); 
       link.data('cparent', parent); 
       link.data('ctab', tab); 

       // find tab holder 
       if(!tabHolder && tab.length) { 
        tabHolder = tab.parent(); 
       } 

       // show only active tab 
       var classOwner = options.addToParent ? parent : link; 
       if(classOwner.hasClass(options.activeClass) || (options.checkHash && location.hash === href)) { 
        classOwner.addClass(options.activeClass); 
        prevActiveLink = link; currentTab = tab; 
        tab.removeClass(tabHiddenClass).width(''); 
        contentTabsEffect[options.effect].show({tab:tab, fast:true}); 
       } else { 
        var tabWidth = tab.width(); 
        if(tabWidth) { 
         tab.width(tabWidth); 
        } 
        tab.addClass(tabHiddenClass); 
       } 

       // event handler 
       link.bind(options.event, function(e){ 
        if(link != prevActiveLink && !animating) { 
         switchTab(prevActiveLink, link); 
         prevActiveLink = link; 
        } 
       }); 
       if(options.attrib === 'href') { 
        link.bind('click', function(e){ 
         e.preventDefault(); 
        }); 
       } 
      }); 

      // tab switch function 
      function switchTab(oldLink, newLink) { 
       animating = true; 
       var oldTab = oldLink.data('ctab'); 
       var newTab = newLink.data('ctab'); 
       prevActiveLink = newLink; 
       currentTab = newTab; 

       // refresh pagination links 
       (options.addToParent ? tabLinksParents : tabLinks).removeClass(options.activeClass); 
       (options.addToParent ? newLink.data('cparent') : newLink).addClass(options.activeClass); 

       // hide old tab 
       resizeHolder(oldTab, true); 
       contentTabsEffect[options.effect].hide({ 
        speed: options.animSpeed, 
        tab:oldTab, 
        complete: function() { 
         // show current tab 
         resizeHolder(newTab.removeClass(tabHiddenClass).width('')); 
         contentTabsEffect[options.effect].show({ 
          speed: options.animSpeed, 
          tab:newTab, 
          complete: function() { 
           if(!oldTab.is(newTab)) { 
            oldTab.width(oldTab.width()).addClass(tabHiddenClass); 
           } 
           animating = false; 
           resizeHolder(newTab, false); 
           autoRotate(); 
          } 
         }); 
        } 
       }); 
      } 

      // holder auto height 
      function resizeHolder(block, state) { 
       var curBlock = block && block.length ? block : currentTab; 
       if(options.autoHeight && curBlock) { 
        tabHolder.stop(); 
        if(state === false) { 
         tabHolder.css({height:''}); 
        } else { 
         var origStyles = curBlock.attr('style'); 
         curBlock.show().css({width:curBlock.width()}); 
         var tabHeight = curBlock.outerHeight(true); 
         if(!origStyles) curBlock.removeAttr('style'); else curBlock.attr('style', origStyles); 
         if(state === true) { 
          tabHolder.css({height: tabHeight}); 
         } else { 
          tabHolder.animate({height: tabHeight}, {duration: options.animSpeed}); 
         } 
        } 
       } 
      } 
      if(options.autoHeight) { 
       $(window).bind('resize orientationchange', function(){ 
        tabs.not(currentTab).removeClass(tabHiddenClass).show().each(function(){ 
         var tab = jQuery(this), tabWidth = tab.css({width:''}).width(); 
         if(tabWidth) { 
          tab.width(tabWidth); 
         } 
        }).hide().addClass(tabHiddenClass); 

        resizeHolder(currentTab, false); 
       }); 
      } 

      // autorotation handling 
      var rotationTimer; 
      function nextTab() { 
       var activeItem = (options.addToParent ? tabLinksParents : tabLinks).filter('.' + options.activeClass); 
       var activeIndex = (options.addToParent ? tabLinksParents : tabLinks).index(activeItem); 
       var newLink = tabLinks.eq(activeIndex < tabLinks.length - 1 ? activeIndex + 1 : 0); 
       prevActiveLink = tabLinks.eq(activeIndex); 
       switchTab(prevActiveLink, newLink); 
      } 
      function autoRotate() { 
       if(options.autoRotate && tabLinks.length > 1) { 
        clearTimeout(rotationTimer); 
        rotationTimer = setTimeout(function() { 
         if(!animating) { 
          nextTab(); 
         } else { 
          autoRotate(); 
         } 
        }, options.switchTime); 
       } 
      } 
      autoRotate(); 
     }); 
    }; 

    // add stylesheet for tabs on DOMReady 
    var tabHiddenClass = 'js-tab-hidden'; 
    $(function() { 
     var tabStyleSheet = $('<style type="text/css">')[0]; 
     var tabStyleRule = '.'+tabHiddenClass; 
     tabStyleRule += '{position:absolute !important;left:-9999px !important;top:-9999px !important;display:block !important}'; 
     if (tabStyleSheet.styleSheet) { 
      tabStyleSheet.styleSheet.cssText = tabStyleRule; 
     } else { 
      tabStyleSheet.appendChild(document.createTextNode(tabStyleRule)); 
     } 
     $('head').append(tabStyleSheet); 
    }); 

    // tab switch effects 
    var contentTabsEffect = { 
     none: { 
      show: function(o) { 
       o.tab.css({display:'block'}); 
       if(o.complete) o.complete(); 
      }, 
      hide: function(o) { 
       o.tab.css({display:'none'}); 
       if(o.complete) o.complete(); 
      } 
     }, 
     fade: { 
      show: function(o) { 
       if(o.fast) o.speed = 1; 
       o.tab.fadeIn(o.speed); 
       if(o.complete) setTimeout(o.complete, o.speed); 
      }, 
      hide: function(o) { 
       if(o.fast) o.speed = 1; 
       o.tab.fadeOut(o.speed); 
       if(o.complete) setTimeout(o.complete, o.speed); 
      } 
     }, 
     slide: { 
      show: function(o) { 
       var tabHeight = o.tab.show().css({width:o.tab.width()}).outerHeight(true); 
       var tmpWrap = $('<div class="effect-div">').insertBefore(o.tab).append(o.tab); 
       tmpWrap.css({width:'100%', overflow:'hidden', position:'relative'}); o.tab.css({marginTop:-tabHeight,display:'block'}); 
       if(o.fast) o.speed = 1; 
       o.tab.animate({marginTop: 0}, {duration: o.speed, complete: function(){ 
        o.tab.css({marginTop: '', width: ''}).insertBefore(tmpWrap); 
        tmpWrap.remove(); 
        if(o.complete) o.complete(); 
       }}); 
      }, 
      hide: function(o) { 
       var tabHeight = o.tab.show().css({width:o.tab.width()}).outerHeight(true); 
       var tmpWrap = $('<div class="effect-div">').insertBefore(o.tab).append(o.tab); 
       tmpWrap.css({width:'100%', overflow:'hidden', position:'relative'}); 

       if(o.fast) o.speed = 1; 
       o.tab.animate({marginTop: -tabHeight}, {duration: o.speed, complete: function(){ 
        o.tab.css({display:'none', marginTop:'', width:''}).insertBefore(tmpWrap); 
        tmpWrap.remove(); 
        if(o.complete) o.complete(); 
       }}); 
      } 
     } 
    }; 
}(jQuery)); 

Answer 1

Решенный вопрос путем изменения значения display:block; в display:none; в этой строке скрипта JS:

tabStyleRule += '{position:absolute !important;left:-9999px !important;top:-9999px !important;display:block !important}'; 

Answer 2

Не пытаясь выяснить код толкованием, я считаю, что лучше, чтобы скрыть все вкладки панелей по умолчанию.

.ui-tabs-panel { 
    display: none; 
    /*overflow: hidden; 
    opacity: 0;*/ 
} 

Ваш options.activeClass должен иметь:

.ui-tabs-panel.active { 
    display: block; 
    overflow-y: auto; 
    /*transition: opacity 1s ease-in-out;*/ 
} 

Этот способ переопределить видимое состояние вашего .active класса. Однако, если это анимация, которую вы хотите достичь, вы можете попробовать с opacity. Не тестировался, и я обычно не эти первые попытки в CSS3 так в JQuery:

var tabPanelOptions = options.tabPanelOptions || { 
    duration: 200, 
    easing: 'linear' 
}; 

$(options.tabPanel).fadeToggle(tabPanelOptions); 

Вся идея заключается в том, чтобы переключить/обратную видимость на состояние по умолчанию.