2014-09-13 45 views
0

我把一个jquery滑块放在Bootstrap选项卡上,但该选项卡不起作用,除非窗口调整大小。我猜这是因为它是在一个空容器中创建的,而不是在容器存在时被解雇。jQuery调整窗口选项卡上点击

我试过在点击标签触发窗口resize事件:

$('#myTab a[href="#slider"]').click(function (e) { 
     e.preventDefault() 
     $(this).tab('show'); 
     jQuery(window).trigger('resize'); 
    $('.swiper-container').css('height','100%').css('width','100%'); 
    }) 

但没有奏效。

JS小提琴LINK

回答

0

呼叫组队,探索功能一旦显示滑块标签..

var isSliderActive = false; 

    $('#myTab a').click(function (e) { 
     e.preventDefault(); 
     $(this).tab('show'); 
     if($(this).attr('href') == "#slider"){ 
      if(isSliderActive === false){ //If slider is not active 
       var mySwiper = new Swiper('.swiper-container',{ 
        pagination: '.pagination', 
        paginationClickable: true 
       }); 
      } 
      isSliderActive = true; 
     }  
    }); 

更新jsFiddle

0

展开和collscape DIV:

var open = false; 
$('#SlideButton').click(function() { 
    if (open === false) { 
     $('#SlideContent').animate({ height: '650px' }, 600); 
     $('#SlideContent').css('display', 'block'); 
     $(this).css('background-position', 'bottom left'); 
     open = true; 
    } 
    else { 
     $('#SlideContent').animate({ height: '0' }, 600, function() { 
      $('#SlideContent').css('display', 'none'); 
     }); 
     $(this).css('background-position', 'top left'); 
     open = false; 
    } 
});