title: Bootstrap tabs not working for a view with two partial views
body: <p>I have a main view which has two tabs. The first tab is the default tab and should display the first partial view and the second tab should display the second partial view. While I am getting that to work properly, I am not able to get the tab highlighted for the particular selected tab.</p>
  
  <p>My controller.</p>
  
  <pre><code>public ActionResult Contact(int condition=0)
      {
  
          if(condition==0)
              ViewBag.Message = "Tab1";
          else
              ViewBag.Message = "Tab2";
  
          ViewBag.Condition = condition;
          return View();
      }
  </code></pre>
  
  <p>My View</p>
  
  <pre><code>@{
  ViewBag.Title = "Contact";
  }
  &lt;h2&gt;@ViewBag.Title.&lt;/h2&gt;
  
  
  &lt;div&gt;
  &lt;ul class="nav nav-tabs"&gt;
      &lt;li&gt;@Html.ActionLink("Tab1","Contact", new { condition=0})&lt;/li&gt;
      &lt;li&gt;@Html.ActionLink("Tab2", "Contact", new { condition = 1 })&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
      @if (ViewBag.Condition == 0)
      {
      &lt;div class="tab-pane active" id="Tab1"&gt;
          @Html.Partial("_Partial1")
      &lt;/div&gt;
      }
      else
      {
      &lt;div class="tab-pane active" id="Tab2"&gt;
          @Html.Partial("_Partial2")
      &lt;/div&gt;
      }
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT 1: As suggested by an answer does not solve the problem.</p>
  
  <pre><code>@{
  ViewBag.Title = "Contact";
  }
  &lt;h2&gt;@ViewBag.Title.&lt;/h2&gt;
  
  
  &lt;div&gt;
  &lt;ul class="nav nav-tabs"&gt;
      &lt;li&gt;@Html.ActionLink("Tab1","Contact", new { condition=0}, new { @class = ViewBag.Condition == 0 ? "active" : "" })&lt;/li&gt;
      &lt;li&gt;@Html.ActionLink("Tab2", "Contact", new { condition = 1 }, new { @class = ViewBag.Condition == 1 ? "active" : "" })&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
      @if (ViewBag.Condition == 0)
      {
      &lt;div class="tab-pane active" id="Tab1"&gt;
          @Html.Partial("_Partial1")
      &lt;/div&gt;
      }
      else
      {
      &lt;div class="tab-pane active" id="Tab2"&gt;
          @Html.Partial("_Partial2")
      &lt;/div&gt;
      }
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT 2:</p>
  
  <pre><code>   &lt;div id="tabs"&gt;
     &lt;ul class="nav nav-tabs"&gt;
  
          &lt;li class="nav active"&gt;@Html.ActionLink("Tab1", "Contact", new { condition = 0 }, new { @id = "Tab1", data_toggle = "tab" })&lt;/li&gt;
          &lt;li class="nav"&gt;@Html.ActionLink("Tab2", "Contact", new { condition = 1 }, new { @id = "Tab2", data_toggle = "tab" })&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
  
      &lt;div class="tab-pane fade in active" id="Tab1"&gt;
          @Html.Partial("_Partial1")
      &lt;/div&gt;
  
      &lt;div class="tab-pane fade" id="Tab2"&gt;
          @Html.Partial("_Partial2")
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I have changed the code to be based on <a href="https://jsfiddle.net/79zjyd6L/1/" rel="nofollow noreferrer">this fiddle</a>
  Does not make much difference.</p>