부트 스트랩 nav-tabs에 탭 콘텐츠가 표시되지 않습니다.

Question

View (ASP.NET MVC 3을 사용하고 있습니다)에 전달 된 객체를 반복하고 부트 스트랩을 사용하여 Nav Tab을 만듭니다.

현재로서는 실제 TABS가 작동하고 잘 렌더링됩니다. 탭 콘텐츠 그러나 표시되지 않습니다 - 또는 내가 "다른 탭을 클릭하면 기본적으로 현재 탭 콘텐츠를 보여주는"활성 "클래스를 만들 것입니다 중 하나가됩니다.

내가 원하는 일 : 탭을 클릭하십시오 -> 내용이 나타납니다.

현재 진행 상황 : 탭을 클릭하십시오. -> 탭 콘텐츠의 클래스를 활성으로 변경하지 않으면 아무 것도 표시되지 않습니다.

다음은 내 코드입니다 :

<div> 
<ul class="nav nav-tabs"> 
    @for (int i = 0; i < 1;) 
    { 
     foreach (var cat in Model.MyObject) 
     { 
      if (i == 0) 
      { 
       <li class="active"><a href="#@cat.Name" data-toggle="tab">@cat.Name</a></li> 
       i++; 
      } 
      else 
      { 
       <li><a href="#@cat.Name" data-toggle="tab">@cat.Name</a></li> 
      } 
     } 
    } 

</ul> 
<div class="tab-content" style="overflow: visible;"> 
    @for (int i = 0; i < 1;) 
    { 
     foreach (var cat in Model.Model.MyObject) 
     { 
      if (i == 0) 
      { 
       <div class="tab-pane active" id="#@cat.Name">@cat.Name</div> 
       i++; 
      } 
      else 
      { 
       <div class="tab-pane" id="#@cat.Name">@cat.Name</div> 
      } 
     } 
    } 
</div> 

내가 각 foreach 루프를 통해 브레이크 포인트를 넣어 - 그 하지 문제, 그래서 전달되는 내용이 있습니다.

다른 탭을 선택하면 내용이 변경되도록 코드를 어떻게 수정합니까?

EDIT : 첫 번째 기능 만 활성화하는 IF 기능을 만들었습니다. 현재 탭은 전환 할 수 있지만 내용은 전환되지 않습니다. 첫 번째 콘텐츠 만 표시되며 다른 탭을 클릭해도 변경되지 않습니다.

Answer 1

. 사용자 중 하나를 active으로 지정해야 사용자가 페이지를로드 할 때 활성 탭이 표시됩니다. 그런 다음 다른 탭을 클릭하면 js가 실행되고 active 클래스가 해당 탭으로 이동합니다. if 문을 넣으면 첫 번째 탭 (또는 기본적으로 활성화 할 탭)에 active 클래스 만 추가하게 할 수 있습니다.

Answer 2

마크 업이 있지만 active 클래스의 로직은 없습니다. 부트 스트랩은 자바 스크립트를 통해 그 논리를 제공합니다.

$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}) 

자료 : I CakePHP를에 비슷한 일을했을 http://twitter.github.com/bootstrap/javascript.html#tabs