[英]Multiple carousels in Tabs
我有一堆选项卡,每个选项卡都应包含一个轮播(例如,Tab1到Carousel1,Tab2到Carousel2等)。但是,只有第一个选项卡的轮播会呈现。 我已经尝试了从生成唯一ID到使用类选择器的所有方法,但仍无法使其按需工作。 谢谢
带剃须刀钩的HTML
<div class="tabbable">
<ul id="myTab" class="nav nav-tabs">
@{int incs=0;}
@foreach(var row in db.Query(queryCategory))
{
<li><a href="#@row.Category_ID" data-toggle="tab">@row.Category_Name</a></li>
}
</ul>
<div class="tab-content">
@{bool first = true;}
@foreach(var row in db.Query(queryCategory))
{
var ids= @row.Category_ID;
<div class="@{if (first){<text>tab-pane active</text> first = false;}else{<text>tab-pane</text>}}" id=@ids>
<p>I'm in @row.Category_Name.</p>
<ul id="@("customselect"+@incs++)" class="elastislide-list carousel">
@foreach(var row1 in db.Query("SELECT * FROM Food WHERE Category_ID = @0", ids))
{
<li><a href="@row1.Food_ID" class="link">
<div class="image-box"><img src="img/food.jpg"></div>
<span>@row1.Food_Name</span>
</a>
</li>
}
</ul>
</div>
}
</div><!--tabbable-->
jQuery的
$('.carousel').each(function(index) {
$(this).elastislide();
});
更改制表符后,尝试调用.elastislide()。
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
$("div.tab-content").find('ul.carousel').elastislide();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.