탭의 여러 회전식 탭

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(); 
});