How to programatically make a link active
<p>In my mvc.net web app I'm using bootstrap 3 to display various aspects about a product in a tab view. This works fine. The page also has an Edit button which navigates to an edit page that has the same layout of a tab view but the partial views for each tab will have editable inputs/dropdowns etc.</p>

<p>My tab view on my Details view is:</p>

<pre><code>&lt;div id="productdetail"&gt;
    &lt;div class="col-xs-8 col-sm-9 col-md-10 col-lg-11"&gt;
        &lt;div class="tab-content"&gt;
            &lt;div id="product" class="tab-pane fade in active"&gt;
                @Html.Partial("_productDetails", Model)
            &lt;/div&gt;
            &lt;div id="stock" class="tab-pane fade"&gt;
                @Html.Partial("_stockDetails", Model)
            &lt;/div&gt;
            &lt;div id="notes" class="tab-pane fade"&gt;
                @Html.Partial("_Notes", Model)
            &lt;/div&gt;
            &lt;div id="manufacture" class="tab-pane fade"&gt;
                @Html.Partial("_ManufactureDetails", Model)
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;br /&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-4 col-sm-3 col-md-2 col-lg-1"&gt;
        &lt;ul class="nav nav-pills nav-stacked"&gt;
            &lt;li class="active"&gt;&lt;a data-toggle="pill" data-theme="product" href="#product"&gt;Product&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a data-toggle="pill" data-theme="stock" href="#stock"&gt;Stock&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a data-toggle="pill" data-theme="notes" href="#notes"&gt;Notes&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a data-toggle="pill" data-theme="manufacture" href="#manufacture"&gt;Manufacture&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;br /&gt;
    &lt;/div&gt;
    &lt;span style="float:right; margin-right:10px;"&gt;
       &lt;input type="hidden" id="hd_SelectedTab" /&gt;
                &lt;button type="button" class="btn btn-default" style="margin-top:2px;" onclick="goEdit('@Model.ServerDetailID')"&gt;
                    Edit&amp;nbsp;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt;
                &lt;/button&gt;&amp;nbsp;|&amp;nbsp;
        &lt;button type="button" class="btn btn-default" style="margin-top:2px;" onclick="location.href='@Url.Action("Index", "Home")'"&gt;
            Back Home&amp;nbsp;&lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt;
        &lt;/button&gt;
    &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>On clicking a link I have the following function that stores which tab(link) had been clicked.</p>

<pre><code>$("a[data-theme]").click(function () {
    var $selectedTab = $(this).data("theme")
    $("#hd_SelectedTab").val($selectedTab);
    //alert('tab Selected is now: ' + $selectedTab);
});
</code></pre>

<p>The Edit button when clicked calls this function...</p>

<pre><code>function goEdit(sn) {
    var tabSelected = $("#hd_SelectedTab").val();
    window.location = "../Details/Edit?sn=" + '@Model.ServerDetailID' + "&amp;ts=" + tabSelected;
}
</code></pre>

<p>JSFiddle - <a href="https://jsfiddle.net/DTcHh/20303/" rel="nofollow">https://jsfiddle.net/DTcHh/20303/</a></p>

<p>On my Edit view I now want to use the tabSelected value to select the same tab... i.e. if the stock tab is selected and the edit button clicked the edit view should open with the stock tab as the active tab. </p>

<p>My edit view is:</p>

<pre><code>&lt;div id="productedit"&gt;
    &lt;div class="col-xs-8 col-sm-9 col-md-10 col-lg-11"&gt;
        &lt;div class="tab-content"&gt;
            &lt;div id="product" class="tab-pane fade in active"&gt;
                @Html.Partial("_productEdit", Model)
            &lt;/div&gt;
            &lt;div id="stock" class="tab-pane fade"&gt;
                @Html.Partial("_stockEdit", Model)
            &lt;/div&gt;
            &lt;div id="notes" class="tab-pane fade"&gt;
                @Html.Partial("_NotesEdit", Model)
            &lt;/div&gt;
            &lt;div id="manufacture" class="tab-pane fade"&gt;
                @Html.Partial("_ManufactureEdit", Model)
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;br /&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-4 col-sm-3 col-md-2 col-lg-1"&gt;
        &lt;ul class="nav nav-pills nav-stacked"&gt;
            &lt;li class="active"&gt;&lt;a data-toggle="pill" data-theme="product" href="#product"&gt;Product&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a data-toggle="pill" data-theme="stock" href="#stock"&gt;Stock&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a data-toggle="pill" data-theme="notes" href="#notes"&gt;Notes&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a data-toggle="pill" data-theme="manufacture" href="#manufacture"&gt;Manufacture&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;br /&gt;
    &lt;/div&gt;
    &lt;!-- Removed save button &amp; notification panel for brevity --&gt;
&lt;/div&gt; 
</code></pre>

<p>Then I have the following unfinished javascript</p>

<pre><code>$(document).ready(function () {

    var ts = '@ViewData("TabSelected")'

    switch(ts) {
        case "product":
            // select the product tab and show partial view _productEdit
            break;
        case "stock":
            // select the stock tab and show partial view _stockEdit
            break;
        case "notes":
            // select the notes tab and show partial view _notesEdit
            break;
        case "manufacture":
            // select the manufacture tab and show partial view _manufactureEdit
            break;
        default:
            // select the product tab and show partial view _productEdit
    }
})
</code></pre>

<p>JSFiddle - <a href="https://jsfiddle.net/os1pk3og/2/" rel="nofollow">https://jsfiddle.net/os1pk3og/2/</a></p>

<p>How do I pragmatically activate the correct link and show the correct partial view?</p>

<p>UPDATE</p>

<p>Base on the answer provided I made the appropriate changes against each tab panel</p>

<pre><code>&lt;div id="product" class="tab-pane fade @(If(ViewData("TabSelected") = "product", "in active", ""))"&gt;
      @Html.Partial("_ProductEdit", Model)
&lt;/div&gt;
</code></pre>

<p>and each pill link</p>

<pre><code>&lt;li class=@(If(ViewData("TabSelected") = "product", "active", ""))&gt;&lt;a data-toggle="pill" data-tabId="product" href="#product"&gt;Product&lt;/a&gt;&lt;/li&gt;
</code></pre>