显示/隐藏div内的bxSlider [英] bxSlider within show/hide divs
问题描述
我的网页内容使用不同的链接进行切换，每次使用jQuery的showonlyone功能显示一个 div 。在加载页面时，不应显示任何div。我得到它工作正常，直到我试图把一个图片滑块（bxSlider）内的一个div， newboxes1 。
在盒子外面，bxSlider工作正常。在其中，图片不显示。查看实时示例此处。
这里是我的代码如下所示：
< head>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-latest.js>< / script>
< script type =text / javascript>
函数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.jstype =text / javascript>< / script>
< script src =jquery.bxSlider.min.jstype =text / javascript>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（function（）{
var slider = $（'＃slidersample'）。bxSlider（{
模式：'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（）;
返回false;
}）;
$（'＃hover-next-d-sample'）。click（function（）{
slider.goToNextSlide（）;
return假;
}）;
}）;
}）;
< / script>
< / head>
< body>
< div id =left-menu>
< a id =myHeader1href =javascript：showonlyone（'newboxes1'）; > LINK 1< / a>< br />
< a id =myHeader2href =javascript：showonlyone（'newboxes2'）; > LINK 2< / a>< br />
< / div>
<！ - SLIDER - >
< div id =sliderstyle =margin-top：0px; width =580 px; height =375 px>
< div class =bx-next>< div id =bx < / div>< / div>< / div>
< div class =hover-next-g>< div id =hover-next-g-sample风格=高度：100％; width：100％>< / div>< / div>
< div class =hover-next-d>< div id =hover-next-d-samplestyle =高度：100％;宽度：100％>< / div>< / div>
< ul id =slidersamplewidth =580pxheight =375 pxstyle =margin：0px; padding：0px>
< li>< img src =images / 1.jpgwidth =580height =375/>< / li>
< li>< img src =images / 2.jpgwidth =580height =375/>< / li>
< li>< img src =images / 3。 jpgwidth =580height =375/>< / li>
< / ul>
< / div>
<！ - SLIDER END- - >
< / div>
< div> $ b $< / div> $ b $ div class =newboxesid =newboxes2> b
< div class =newboxesid =newboxes3> DIV 3< / div>
< / body>
< / html>
我使用
.newboxes {display：none;}
在CSS中没有div显示当页面加载时，从CSS中移除这个问题可以解决bxSlider问题，正如您在这里所见。但是，页面加载时会显示内容，而我希望隐藏所有内容pt在代码中的其他地方使用 display：block 或 display：none
任何人都可以想办法解决这个问题吗？谢谢。
我对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（）{//设置DIV可见的按钮
$（＃trainings-slide）。show（）; //包含SLIDER的DIV
mySlider.reloadSlider（）; // Reloads幻灯片（bxSlider API函数）
}）;
}）;
< / script>
正如您所看到的，我在之后重新加载了幻灯片包含滑块）显示，并完美运作。也许这可以帮助您解决问题并避免使用可见性：隐藏和其他技巧。
My page's content is toggled using different links, showing one div at a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put a picture slider (bxSlider) within one of the divs, newboxes1.
Outside the box, the bxSlider works fine. Within it, the pictures don't show. See live example here.
Here's what my code looks like :
<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>
I use
.newboxes {display:none;}
in the CSS so none of the divs are showing when the page is loading. Removing this from the CSS solves the bxSlider issue, as you can see here. However, the content is shown when the page is loaded, while I want all of it to be hidden. Any attempt to use display:block or display:none elsewhere in the code has been unsuccessful.
Can anyone think of a way to fix this? Thank you.
I had the similar problem with bxSlider plugin: when the DIV that contained it was initially hidden display:none, the slideshow would not appear when I make the DIV visible $('#div-id').show();. Only slideshow control buttons appeared. Then I solved the problem like this:
<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>
As you can see I reloaded the slideshow just after the DIV (that contain the slider) was showed and it worked perfectly. Maybe that can help to solve your problems and to avoid using visibility:hidden and other tricks.
这篇关于显示/隐藏div内的bxSlider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
