Question

我有一堆标签，每个标签应包含一个轮播（例如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();
});

Answer 1

在更改标签时尝试调用.elastislide（）。

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
    $("div.tab-content").find('ul.carousel').elastislide();
});

Tabs中的多个轮播

1 个答案: