滑块在 jQuery 选项卡中不起作用 [英] Slider does not work in the jQuery Tabs
本文介绍了滑块在 jQuery 选项卡中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在 jQuery 选项卡中使用 2 个 jQuery Flexslider.选项卡 1 上的滑块可以正常工作,但不能在选项卡 2 中工作.
I want to use 2 jQuery Flexsliders in the jQuery tabs. The slider on the tab 1 works fine, but it does not work in the tab 2.
以下是 JSFiddle 上代码的完整演示:
Here is the full demo of the code on JSFiddle:
演示:
jQuery 代码:
$(document).ready(function() {
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true
});
$('#flexslider1').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container1",
directionNav: true,
controlNav: true
});
$('#flexslider2').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
});
HTML:
<div id="tabvanilla">
<ul class="tabnav">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
</ul>
<div id="tab1" class="cf">
<div id="flexslider1" class="flexslider">
<ul class="slides">
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
</div>
<div class="flex-container1"></div>
</div><!-- div#tab1 -->
<div id="tab2">
<div id="flexslider2" class="flexslider">
<ul class="slides">
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<div class="flex-container2"></div>
</div>
</div><!-- div#tab2 -->
</div><!-- div#tabvanilla -->
推荐答案
你需要在可见时初始化你的 flexslider(在标签更改时)
You'll need to init your flexslider when visible (on tab change)
我认为你可以这样做:
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true,
select: function(event, ui) {
switch (ui.index) {
case 0:
// nothing to do since this is selected by default on page load
break;
case 1:
$('#flexslider2').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
break;
}
}
});
这篇关于滑块在 jQuery 选项卡中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文