顯示/隱藏div內的bxSlider

我的頁面內容使用不同的鏈接切換，每次顯示一個div使用jQuery'showonlyone'函數。在加載頁面時，不應顯示任何div。我得到它工作正常，直到我試圖把一個圖片滑塊（bxSlider）內的其中一個div，newboxes1。顯示/隱藏div內的bxSlider

在箱子外面，bxSlider工作正常。在其中，圖片不顯示。看到現場示例here。

這裏是我的代碼如下所示：

<head> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">           
function showonlyone(thechosenone) { 
    $('.newboxes').each(function(index) { 
      if ($(this).attr("id") == thechosenone) { 
       $(this).show(); 
      } 
      else { 
       $(this).hide(); 
      } 
    }); 
}</script> 
</script> 


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script src="jquery.bxSlider.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 

$(function(){ 
    var slider = $('#slidersample').bxSlider({ 
    mode:'fade', 
    controls: false 
    }); 
    $('#bx-prev-sample').click(function(){ 
    slider.goToPreviousSlide(); 
    return false; 
    }); 
    $('#hover-next-g-sample').click(function(){ 
    slider.goToPreviousSlide(); 
    return false; 
    }); 
    $('#bx-next-sample').click(function(){ 
    slider.goToNextSlide(); 
    return false; 
    }); 
    $('#hover-next-d-sample').click(function(){ 
    slider.goToNextSlide(); 
    return false; 
    }); 
}); 
}); 
</script> 
</head> 


<body> 
<div id="left-menu"> 
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br /> 
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br /> 
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a> 
</div> 

<div class="newboxes" id="newboxes1">DIV 1 
<!-- SLIDER --> 
<div id="slider" style="margin-top: 0px; width="580 px"; height="375 px"> 
<div class="bx-prev"><div id="bx-prev-sample">←</div></div> 
<div class="bx-next"><div id="bx-next-sample">→</div></div> 
<div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div> 
<div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div> 
<ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px"> 
    <li><img src="images/1.jpg" width="580" height="375" /></li> 
    <li><img src="images/2.jpg" width="580" height="375" /></li> 
    <li><img src="images/3.jpg" width="580" height="375" /></li> 
</ul> 
</div> 
<!-- SLIDER END--> 
</div> 

<div class="newboxes" id="newboxes2">DIV 2<br /></div> 

<div class="newboxes" id="newboxes3">DIV 3</div> 

</body> 
</html>

我在CSS所以沒有的div的頁面加載時，爲表示將使用

.newboxes {display:none;}

。從CSS中移除此問題解決了bxSlider問題，您可以看到here。但是，頁面加載時會顯示內容，而我希望隱藏所有內容。任何在代碼中其他地方使用display:block或display:none的嘗試都不成功。

任何人都可以想出一種方法來解決這個問題嗎？謝謝。

來源

2012-06-17 user1461763

我知道這個問題曾被問過，但我有同樣的問題。我不知道什麼與bxSlider和顯示：無。它似乎沒有閱讀內容，如果它包含在顯示設置爲無的div中。

我到目前爲止通過切換visibility:hidden和visibility:visible而不是顯示。

來源

2012-08-17 15:58:29 unsunghero

這是一個很好的解決方案。感謝您的想法！ –

我有與bxSlider插件類似的問題：當包含它的DIV最初隱藏display:none，當我使DIV可見$('#div-id').show();時不會出現幻燈片。只出現幻燈片控制按鈕。然後，我解決了這樣的問題：

<script> 

var mySlider; 

$(function() { 

    mySlider = $('#slider').bxSlider({ 
      easing: 'easeInCubic', 
      displaySlideQty: 3, 
      moveSlideQty: 1, 
      infiniteLoop: false, 
      hideControlOnEnd: true 
    }); 

    $("#processSignUp").click(function() { // button that sets the DIV visible 
     $("#trainings-slide").show();  // DIV that contain SLIDER 
     mySlider.reloadSlider();  // Reloads the slideshow (bxSlider API function) 
    }); 

}); 

</script>

正如你可以看到我重新加載幻燈片只是的DIV（包含滑塊）的表現後，它完美地工作。也許這可以幫助解決您的問題，並避免使用可見性：隱藏和其他技巧。

來源

2012-09-04 07:55:13 sh0ne

好的答案 - 請注意，最新的BX滑塊版本的函數是reloadSlider（）而不是reloadShow（） – rentageekmom

如果我沒有指向mySlider的指針了？或者如果我想重新加載所有幻燈片與一些CSS類？ $（'。bxslider'）。reloadSlider（）不起作用 –

不適用於我：Uncaught TypeError：slider.reloadSlider不是函數 –

您可以使用可見性：隱藏和可見性：可見，但會有一些麻煩。你可以使用height：0px; overflow：hidden; 我最後解決的問題

來源

2014-04-10 14:00:33 user3519817

另一個解決方案是允許bxslider加載，然後在隱藏它之後隱藏它。

<script> 
    var mySlider; 

    $(function() { 
     mySlider = $('#slider').bxSlider({ 
      easing: 'easeInCubic', 
      displaySlideQty: 3, 
      moveSlideQty: 1, 
      infiniteLoop: false, 
      hideControlOnEnd: true, 
      onSliderLoad: function() { 
       $('#trainings-slide').hide(); 
      } 
     }); 
    }); 
</script>

來源

2014-06-24 17:57:20 eightdotthree

這不適用於我，導致完全相同的事情發生。 –

這對我最適合 – tosin

顯示/隱藏div內的bxSlider

回答

相關問題