Twitter-Bootstrap-3 tabs data-toggle href redirect - asp.net-mvc

Question

Using .Net MVC5 with Bootstrap3 how do I get my sub-menu of tabs to redirect to a different view while keeping the data-toggle="tabs"?
I am trying to have a top level menu with a sub menu and keep the data-toggle functionality so show what tabs you are on.
If I remove the data-toggle="tabs" from the sub-menu section the redirect works just fine however I lose the ability to show what tab you are on.
If there is a better way to do this please let me know.
JSFiddle Link
<ul class="nav nav-tabs" id="myTab">
<li>Menu 1
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="one">
<div class="navbar navbar-default">
<ul class="nav nav-pills">
<li>One SubMenu 1
</li>
<li>One SubMenu 2
</li>
<li>One SubMenu 3
</li>
</ul>
</div>
</div>
<div class="tab-pane fade in" id="two">
<div class="navbar navbar-default">
<ul class="nav nav-pills">
<li>Two SubMenu 1
</li>
<li>Two SubMenu 2
</li>
<li>Two SubMenu 3
</li>
</ul>
</div>
</div>
<div class="tab-pane fade in" id="three">
<div class="navbar navbar-default">
<ul class="nav nav-pills">
<li>Three SubMenu 1
</li>
<li>Three SubMenu 2
</li>
<li>Three SubMenu 3
</li>
</ul>
</div>
</div>
</div>
This is the jquery error the way it stands.
Unhandled exception at line 1864, column 2 in http://localhost:34607/Scripts/jquery-1.10.2.js
0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: /Home/About

Answer 1

I had the same problem and solved it by adding a custom field to my ViewModel which has the active tabpage.
<ul class="nav nav-tabs tabs">
<li #(Model.ViewMode == 1 ? "class=active" : "")>#Html.ActionLink("Item1", "List", new { viewMode = 1 })</li>
<li #(Model.ViewMode == 2 ? "class=active" : "")>#Html.ActionLink("Item2", "List", new { viewMode = 2 })</li>
<li #(Model.ViewMode == 3 ? "class=active" : "")>#Html.ActionLink("Item3", "List", new { viewMode = 3 })</li>
</ul>