I'm trying to create a toggle effect on the navagation tabs in an MVC 5/Razor 3 application, with bootstrap css. My current shared _layout

        <div class="navbar-collapse collapse"> 
            <ul class="nav nav-pills">                           
                <li>@Html.ActionLink("Applications", "Index", "SecureApps")</li>
                <li>@Html.ActionLink("Users", "Index", "Users")</li>
                <li>@Html.ActionLink("BU Groups", "Index", "BUGroups")</li>
                <li>@Html.ActionLink("Logs", "Index", "AppLogs")</li> 
            </ul>         
        </div>

I want to be able to highlight the tabs like this Demo when a tab is clicked and I'm on an active page.

I've found a solution Here and updated my code to this

                <li class="active">@Html.ActionLink("Applications", "Index", "SecureApps", null, new { id = "menu_text", data_toggle = "tab" }))</li>
                <li>@Html.ActionLink("Users", "Index", "Users", null, new { id = "menu_text", data_toggle = "tab" })</li>
                <li>@Html.ActionLink("BU Groups", "Index", "BUGroups", null, new { id = "menu_text", data_toggle = "tab" }))</li>
                <li>@Html.ActionLink("Logs", "Index", "AppLogs", null, new { id = "menu_text", data_toggle = "tab" }))</li>

Hovering over each tab shows the correct URL route. however, I'm getting a jQuery javascript runtime error

Unhandled exception at line 1864, column 2 in http://localhost:19932/Scripts/jquery-1.10.2.js 0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: /Users

this is the code it points to in the js library

Sizzle.error = function( msg ) {
throw new Error( "Syntax error, unrecognized expression: " + msg );};

putting a breakpoint on the @model declaration on the destination Index pages doesn't even get hit.

Related posts

Recent Viewed