Javascript 显示/隐藏div中的bxSlider_Javascript_Jquery_Html_Bxslider

Javascript 显示/隐藏div中的bxSlider

javascript jquery html

Javascript 显示/隐藏div中的bxSlider,javascript,jquery,html,bxslider,Javascript,Jquery,Html,Bxslider,使用不同的链接切换我的页面内容，使用jQuery“showonlyone”函数一次显示一个div。加载页面时，不应显示任何div。我让它工作得很好，直到我尝试在一个div中放置一个图片滑块（bxSlider），newboxes1 在机箱外部，bxSlider工作正常。在它里面，图片不显示。见现场示例我的代码是这样的： <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest

使用不同的链接切换我的页面内容，使用jQuery“showonlyone”函数一次显示一个

div

。加载页面时，不应显示任何div。我让它工作得很好，直到我尝试在一个div中放置一个图片滑块（bxSlider），

newboxes1

在机箱外部，bxSlider工作正常。在它里面，图片不显示。见现场示例

我的代码是这样的：

<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。如您所见，将其从CSS中删除可以解决bxSlider问题。但是，当页面加载时，内容会显示出来，而我希望所有内容都隐藏起来。试图在代码中的其他位置使用

display:block

或

display:none

的任何尝试均未成功

有人能想出一个办法来解决这个问题吗？谢谢。

我知道这个问题刚才有人问过，但我也有同样的问题。我不知道bxSlider和display出了什么问题：没有。如果内容包含在一个div中且显示设置为none，则它似乎不会读取该内容

到目前为止，我通过切换

可见性：隐藏和可见性：可见而不是显示来解决这个问题。
我在bxSlider插件中也遇到了类似的问题：当包含它的DIV最初被隐藏显示：无时，当我使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>


mySlider变种；
$（函数（）{
mySlider=$（'#slider'）.bxSlider({
放松：“放松”是指“放松”，
显示幻灯片数量：3，
移动滑块数量：1，
无穷远：错，
HIDECONTROLONDE:正确
});
$（“#processSignUp”）。单击（function（）{//按钮，将DIV设置为可见
$（“#幻灯片”）.show（）；//包含滑块的DIV
mySlider.reloadSlider（）；//重新加载幻灯片放映（bxSlider API函数）
});
});

正如您所见，我在显示DIV（包含滑块）之后重新加载了幻灯片放映，效果非常好。也许这有助于解决您的问题，避免使用可见性：隐藏和其他技巧。您可以使用可见性：隐藏和可见性：可见，但会带来一些麻烦。您可以使用高度：0px；溢出：隐藏；
我正在使用last solve
另一个解决方案是允许bxslider加载，然后在加载后隐藏它
<script>
    var mySlider;

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


mySlider变种；
$（函数（）{
mySlider=$（'#slider'）.bxSlider({
放松：“放松”是指“放松”，
显示幻灯片数量：3，
移动滑块数量：1，
无穷远：错，
希德·特罗隆德：没错，
onSliderLoad:function（）{
$（“#培训幻灯片”）.hide（）；
}
});
});
Great answer-请注意，如果我没有指向mySlider的指针，最新的BX slider版本的函数是reloadSlider（）而不是reloadShow（）？或者如果我想用css类重新加载所有幻灯片$（'.bxslider'）.reloadSlider（）不起作用不适用于我：未捕获类型错误：slider.reloadSlider不是函数这是一个很好的解决方案。谢谢你的主意！！这对我不起作用，导致完全相同的事情发生。
<script>
    var mySlider;

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