Question

I am looping through an object passed to the View (I’m using ASP.NET MVC 3) and creating a Nav Tab using Bootstrap.

At the moment, the actual TABS work and render fine. The tab-content however doesn’t get displayed – Or one of them will if I make it’s class “active” which basically shows the current tab-content (It doesn’t change when I click on a different tab).

What I want to happen: Click on a tab -> It’s content appears.

What currently happens: Click on a tab -> Nothing shows unless I change a tab-content’s class to active (like i mentioned earlier).

Below is my code:

<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>

I put a Breakpoint over each foreach loop – there IS content being passed so that’s not the problem.

How do I modify the code so the content changes when I select a different tab?

EDIT: I have made an IF function that only makes the first one active. As of now, the tabs can switch, BUT, the contents DON’T switch. Only the first content is shown and it won’t change even if I click on another tab.

Answer 1

I have done a similar thing in cakePHP. You need to specify one of them as active so that when the user loads the page they see the active tab. Then when they click on a different tab the js kicks in and moves the active class to that tab. You can put an if statement in to have it only add the active class to the first tab (or whichever tab you want active by default).