两个Bootstrap选项卡一次显示为活动状态

Question

我有五个选项卡正在使用Bootstrap进行动画制作。他们工作正常，直到我添加了最终标签：管理。单击“管理”选项卡时，SuperAdmin选项卡在导航中显示为仍处于活动状态。但是当我点击SuperAdmin标签时，我没有同样的问题。然后，管理选项卡处于非活动状所以这个问题只发生在一个方向。我在创建“管理”选项卡时从该选项卡中进行了一些复制和粘贴，因为设计类似。我认为这是导致问题的原因，但我找不到确切的问题。

单击“管理”选项卡时，我确实尝试从SuperAdmin选项卡中删除活动类，但这似乎不起作用：

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

这是导航：

<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>

我能在jsFiddle中做到最好：

超级管理员选择：

https://jsfiddle.net/s3f3cjon/

选择管理：

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

您可以看到超级管理员标签仍然有活动的类。

任何帮助将不胜感激。谢谢！

Answer 1

错误似乎正在发生，因为我正在检查Absolute Uri是否包含“Manage”这个词，两个标签都是如此。我只是将路由更改为新名称'SuperAdmin'。

，而不是通过并更改我的控制器名称

所以在我的RouteConfig中，我将控制器路由映射到SuperAdmin：

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

然后检查Uri是否包含相反的内容：

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

现在解决了这个问题。

Answer 2

单击“管理”选项卡时，您正在检查Request.Url.AbsoluteUri.Contains("Management")。

导航到管理标签页时，网址中是否包含单词SuperAdmin或Admin？

尝试调试应用程序并检查Request.Url.AbsoluteUri。