引導導航的選項卡不顯示標籤內容

我通過傳遞給視圖對象循環（我使用ASP.NET MVC 3），並使用引導創建導航選項卡。引導導航的選項卡不顯示標籤內容

目前，實際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循環 - 沒有被傳遞所以這不問題的內容。

如何修改代碼以使這個內容的變化，當我選擇一個不同的標籤？

編輯：我已經做了一個IF功能，只有第一個激活。截至目前，標籤可以切換，但是，內容不會切換。只顯示第一個內容，即使我點擊另一個標籤也不會改變。

來源

2012-08-31 Subby

我在做CakePHP的類似的事情。您需要將其中的一個指定爲active，以便用戶加載頁面時可以看到活動選項卡。然後，當他們點擊不同的選項卡時，js會啓動並將active類移至該選項卡。您可以將if聲明放入第一個選項卡（或默認情況下希望激活的選項卡）中，僅將active類添加到該聲明中。

來源

2012-08-31 12:26:07

嗨。請檢查我的原始帖子。我已經更新了它。我的系統現在只顯示1個內容，當我打另一個選項卡時它不會切換。請幫忙... – Subby

你是否在你的bootstrap.js之前的某個地方加入了jquery.js？ Javascript部分中的大部分函數都需要jquery。我相信如果jquery不存在或在bootstrap.js之後，您將看到選項卡發生更改，但不會看到內容。 –

是的，我： – Subby

你有標記，而不是active類的邏輯。 Bootstrap通過Javascript提供該邏輯。

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

來源：http://twitter.github.com/bootstrap/javascript.html#tabs

來源

2012-08-31 10:56:05 albertedevigo

我補充說。仍然不起作用。 – Subby

你能分享你的JS嗎？也許是一個jsfiddle？ – albertedevigo

JS不是問題。 Tabbing工作正常。我實現了硬編碼組件，它們完美地工作。但是這個「動態」的代碼似乎不能正常工作。現在，代碼只顯示1個內容，當我點擊標籤時它不會切換。然而標籤DO很好地切換。 – Subby

引導導航的選項卡不顯示標籤內容

回答

相關問題