0

たくさんのタブがあり、各タブにはカルーセルが含まれている必要があります (例: 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-->

Jクエリ

$('.carousel').each(function(index) {
    $(this).elastislide();
});
4

1 に答える 1

0

タブが変更されたときに .elastislide() を呼び出してみてください。

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
    $("div.tab-content").find('ul.carousel').elastislide();
});
于 2012-12-06T02:19:53.303 に答える