title: Select Tab on Page Load in ASP.NET MVC
body: <p>I have two tabs on a Razor page, I want to be able to load the page and either select page A or B. Currently, the page loads and always lands on A. I have attempted to do this as follows... </p>
  
  <p>In my home view I call my products view</p>
  
  <pre><code>&lt;a class="btn btn-default"
     href='@Url.Action("Index", "Products", new { id = "productB" })'
     role="button"&gt;
     Learn More 
  &lt;/a&gt;
  </code></pre>
  
  <p>where I am passing the route value "productB" so I can attempt to load the tab. In my products controller I have </p>
  
  <pre><code>public ActionResult Index(object id = null)
  {
      if (id != null &amp;&amp; !String.IsNullOrEmpty())
          ViewBag.ActiveTab = id.ToString();
      return View();
  }
  </code></pre>
  
  <p>products view </p>
  
  <pre><code>@{
      string activeTab = ViewBag.ActiveTab;
  }
  
  &lt;div class="products container"&gt;
      &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;
              &lt;a data-toggle="tab" href="#productA"&gt;
                  &lt;span class="glyphicon glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt;productA
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a data-toggle="tab" href="#productB"&gt;
                  &lt;span class="glyphicon glyphicon glyphicon-align-left"&gt;&lt;/span&gt;productB
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="products-body"&gt;
          &lt;div class="tab-content"&gt;
              &lt;div id="productA" class="tab-pane active fade in"&gt;
                  ...
              &lt;/div&gt;
              &lt;div id="productB" class="tab-pane fade"&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with the function </p>
  
  <pre><code>$(function () {
      var selector = '@activeTab';
      $("#" + selector).addClass("active");
  
      // Also tried the following...
      // var anchor = '@activeTab' || $("a[data-toggle=tab]").first().attr("href");
      // $('a[href=' + anchor + ']').tab('show');
  });
  </code></pre>
  
  <p>But this does not select my tab page. This seems so simple, how can I get this to work?</p>