title: @Url.Action does not route when clicked in the navbar
body: <p>I do not possess much knowledge on <code>MVC</code>, <code>JavaScript</code> or <code>Bootstrap</code>. But here I am stuck at something working on all the three. I have a <code>Layout</code> page consisting of a navigation bar styled using <code>Bootstrap</code>. Idea taken from <a href="https://codepen.io/wizly/pen/BlKxo" rel="nofollow noreferrer">here</a>. Markup given below.</p>
  
  <pre><code>&lt;div id="innerTab"&gt;
    &lt;ul class="nav nav-pills"&gt;
      &lt;li class="active"&gt;
        &lt;a href="@Url.Action(" Index ", "Home ")" data-toggle="tab"&gt;Index&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="@Url.Action(" About ", "Home ")" data-toggle="tab"&gt;About&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;div class="tab-content clearfix"&gt;
      &lt;div class="tab-pane active"&gt;
        @RenderBody()
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Since this is a <code>Layout View</code>, I want to be able to load the content from the other Views in the tab content area. Due to which, I have to make use of <code>@RenderBody()</code> which cannot be called more than once. I am not really sure what <code>data-toggle</code> does exactly but clicking on <code>About</code> had no impact whatsoever. Then I realised that I had to manually set the <code>active</code> class on the clicked tab via <code>JS</code>. So this is what I did. </p>
  
  <pre><code>$(".nav li").on("click", function() {
    $(".nav li").removeClass("active");
    $(this).tab('show');
  })
  </code></pre>
  
  <p>Now, the selected tab did become active. However, for some unknown reason, when clicked on <code>About</code>, it does not navigate to the <code>About</code> page but stays at <code>Index</code>. Because of which I had to change it to <code>@Html.ActionLink</code> as given below.</p>
  
  <pre><code>@Html.ActionLink("About", "About", "Home")
  </code></pre>
  
  <p>This successfully navigated to the <code>About</code> page. However, the <code>About</code> tab becomes active for a second and quickly switches to the <code>Index</code> tab but displays the content from the <code>About</code> page. like below.</p>
  
  <p><a href="https://i.stack.imgur.com/6E8gB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6E8gB.png" alt="enter image description here"></a></p>
  
  <p>Thought adding <code>data-toggle</code> would fix this. So I followed the answer given <a href="https://stackoverflow.com/questions/12976120/using-data-toggle-with-html-actionlink#">here</a>. </p>
  
  <pre><code>@Html.ActionLink("About", "About", "Home", new { data_toggle="tab"})
  </code></pre>
  
  <p>And then it's back to square one. Except for the fact that it highlights the tab I select, it does nothing.I am lost!! Where am I going wrong?</p>