我在SO数据库中搜索过这个问题,但没有SUCH问题。
我在每个标签页(bxslider)中都有3个配置标签(标签页UI)和滑块。
HTML:
<div id="tabs">
<ul>
<li><a href="#refrig">Грузовик-рефрижератор</a></li>
<li><a href="#tent">Тентованный грузовик</a></li>
<li><a href="#tral">Грузовик-трал</a></li>
</ul>
<div id="refrig">
<p>
Content 1
</p>
<div class="moduletable_park-slider">
<h2>Галерея грузовиков</h2>
<div class="slider_refr">
<ul>
<li><img src="/images/trucks/refrig/Fotolia_52239820_Subscription_XXL.jpg"></li>
<li><img src="/images/trucks/refrig/Fotolia_55218754_Subscription_XL.jpg"></li>
</ul>
</div>
<div class="slider_refr-pager">
<a data-slide-index="0" href="/"><img src="/images/trucks/refrig/Fotolia_52239820_Subscription_XXL.jpg"></a>
<a data-slide-index="1" href="/"><img src="/images/trucks/refrig/Fotolia_55218754_Subscription_XL.jpg"></a>
</div>
</div>
</div>
<div id="tent">
<p>
Content 2
</p>
<div class="moduletable_park-slider">
<h2>Галерея грузовиков</h2>
<div class="slider_tent">
<ul>
<li><img src="/images/trucks/tent/Fotolia_51570512_Subscription_XL.jpg"></li>
<li><img src="/images/trucks/tent/Fotolia_52155382_Subscription_XXL.jpg"></li>
</ul>
</div>
<div class="slider_tent-pager">
<a data-slide-index="0" href="/"><img src="/images/trucks/tent/Fotolia_51570512_Subscription_XL.jpg"></a>
<a data-slide-index="1" href="/"><img src="/images/trucks/tent/Fotolia_52155382_Subscription_XXL.jpg"></a>
</div>
</div>
</div>
<div id="tral">
<p>
Content 3
</p>
<div class="moduletable_park-slider">
<h2>Галерея грузовиков</h2>
<div class="slider_tral">
<ul>
<li><img src="/images/trucks/tral/Fotolia_15252289_Subscription_XXL.jpg"></li>
<li><img src="/images/trucks/tral/Fotolia_39307969_Subscription_L.jpg"></li>
</ul>
</div>
<div class="slider_tral-pager">
<a data-slide-index="0" href="/"><img src="/images/trucks/tral/Fotolia_15252289_Subscription_XXL.jpg"></a>
<a data-slide-index="1" href="/"><img src="/images/trucks/tral/Fotolia_39307969_Subscription_L.jpg"></a>
</div>
</div>
</div>
</div>
和 JS初始化:
$(function() {
var slider2_initialized = false;
var slider3_initialized = false;
$( "#tabs" ).tabs({
activate: function( event, ui ) {
var tablength = ui.newPanel;
var tab_id = $(ui.newPanel).attr('id');
//alert(tab_id);
if(tab_id == "tent" && slider2_initialized == false)
{
$('.slider_tent ul').bxSlider({
controls: false,
pagerCustom: '.slider_tent-pager'
});
slider2_initialized = true;
}
else if(tab_id == "tral" && slider3_initialized == false)
{
$('.slider_tral ul').bxSlider({
controls: false,
pagerCustom: '.slider_tral-pager'
});
slider3_initialized = true;
}
}
});
$('.slider_refr ul').bxSlider({
controls: false,
pagerCustom: '.slider_refr-pager'
});
});
但是当我转到第二个或第三个标签时,没有内容和滑块加载。