Question

我循环遍历传递给View的对象（我正在使用ASP.NET MVC 3）并使用Bootstrap创建Nav选项卡。

目前，实际的TABS工作并呈现正常。然而，标签内容不会显示 - 或者如果我将它的类设为“活动”，其中一个将显示当前标签内容（当我点击一个时它不会改变）不同的标签）。

我想要发生的事情：点击标签页＆gt;它的内容出现了。

目前发生的事情：点击标签页＆gt;除非我将标签内容的类更改为活动状态（如前所述），否则无法显示任何内容。

以下是我的代码：

<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功能。截至目前，标签可以切换，但不要切换内容。仅显示第一个内容，即使单击另一个选项卡也不会更改。

Answer 1

你有标记，但没有active类的逻辑。 Bootstrap通过Javascript提供该逻辑。

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

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

Answer 2

我在cakePHP中做了类似的事情。您需要将其中一个指定为active，以便在用户加载页面时，他们会看到活动选项卡。然后当他们点击不同的选项卡时，js会启动并将active类移动到该选项卡。您可以放入if语句，只将active类添加到第一个选项卡（或默认情况下要激活的任何选项卡）。

Bootstrap nav-tabs不显示选项卡内容

2 个答案: