CODEWITHSUNDEEP
javascriptjquerycsshtmltwitter-bootstrap
cfly24
cfly24

Reputation: 1962

Two Bootstrap tabs appear active at once

I have five tabs that are using Bootstrap for animation. They were working fine until I added the final tab: Management. When I click the Management tab the SuperAdmin tab displays as still active in the nav. But when I click the SuperAdmin tab I do not have the same issue. The management tab is then inactive. So the issue is only happening one way. I did some copy and paste from that tab when I created the Management tab because the design was similar. I assume that's what is causing the issue, but I can't find the exact problem.

I did try to remove the active class from the SuperAdmin tab when the Management tab was clicked, but that did not seem to work:

<script>
$("#management").click(function () {
    $("#super-admin").removeClass("active");
});

When Super Admin tab is selected

When Management tab is selected

Here is the nav:

<ul class="nav nav-tabs" id="navTabs">

<li @(Request.Url.AbsoluteUri.Contains("Create") ? Html.Raw("class=\"active\"") : Html.Raw("")) > @Html.ActionLink("Add Record", "Create", "Home")</li>

<li @(Request.Url.AbsoluteUri.Contains("Search") ? Html.Raw("class=\"active\"") : Html.Raw("")) >@Html.ActionLink("Search", "Search", "Home")</li>

@if (User.IsInRole("Admin") || User.IsInRole("SuperAdmin") || User.IsInRole("Manager"))
        {
            <li @(Request.Url.AbsoluteUri.Contains("Category") ? Html.Raw("class=\"active\"") : Html.Raw("")) >@Html.ActionLink("Admin", "Index", "Category")</li>
        }

@if (User.IsInRole("SuperAdmin") || User.IsInRole("Manager"))
        {
            <li @(Request.Url.AbsoluteUri.Contains("SuperAdmin") ? Html.Raw("class=\"active\"") : Html.Raw("")) >@Html.ActionLink("SuperAdmin", "Index", "SuperAdmin")</li>
        }
@if (User.IsInRole("Manager"))
        {
            <li @(Request.Url.AbsoluteUri.Contains("Management") ? Html.Raw("class=\"active\"") : Html.Raw(""))>@Html.ActionLink("Management", "Index", "Management")</li>
        }
        <li >@Html.ActionLink("Logoff", "Logoff", "Home")</li>

    </ul>

The best I could do to show this in jsFiddle:

Super Admin selected:

https://jsfiddle.net/s3f3cjon/

Management selected:

https://jsfiddle.net/9sd1faub/3/

You can see that the Super Admin tab still has the class active.

Any help would be appreciated. Thanks!

Upvotes: 2

Views: 574

Answers (2)

cfly24
cfly24

Reputation: 1962

The error seemed to be happening because I was checking to see if the Absolute Uri contained the word 'Manage', which was true for both tabs. Instead of going through and changing my controller name I just changed the routing to a new name, 'SuperAdmin'.

So in my RouteConfig I mapped the controller route to SuperAdmin:

            routes.MapRoute(
            "ManageRoute",
            "SuperAdmin/{id}",
            new { controller = "Manage", action = "Index", id = UrlParameter.Optional }
            );

Then checked to see if the Uri contained that instead:

<li @(Request.Url.AbsoluteUri.Contains("SuperAdmin")

This fixed the issue for now.

Upvotes: 1

Alan Macgowan
Alan Macgowan

Reputation: 481

You are checking for the Request.Url.AbsoluteUri.Contains("Management") when you click the Management Tab.

Could it be that the url contains the word SuperAdmin or Admin in the path when you navigate to Management Tab?

Try debugging the application and check for the Request.Url.AbsoluteUri.

Upvotes: 1

Related Questions