1

我正在循环传递给视图的对象（我正在使用 ASP.NET MVC 3）并使用 Bootstrap 创建一个导航选项卡。

目前，实际的 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 函数，它只使第一个函数处于活动状态。截至目前，选项卡可以切换，但内容不会切换。仅显示第一个内容，即使我单击另一个选项卡也不会更改。

4

2 回答 2

2

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

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

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

于 2012-08-31T10:56:05.297 回答
1

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

于 2012-08-31T12:26:07.383 回答