两个 Bootstrap 选项卡同时显示为活动状态答案

【问题标题】：Two Bootstrap tabs appear active at once两个 Bootstrap 选项卡同时显示为活动状态
【发布时间】：2015-07-20 22:48:04
【问题描述】：

我有五个使用 Bootstrap 制作动画的选项卡。在我添加最后一个选项卡之前，它们工作正常：管理。当我单击管理选项卡时，超级管理员选项卡在导航中显示为仍处于活动状态。但是当我单击 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/

您可以看到“超级管理员”选项卡中的课程仍然处于活动状态。

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

【问题讨论】：

你能在 jsfiddle 上复制这个问题吗，jsfiddle.net
好的，我会在几分钟后发布
由于我正在使用的 .net 元素，我无法在 jsFiddle 中进行复制。如果您认为错误不在上面显示的代码块中，我可以根据需要在此处添加任何其他代码。为了清楚起见，我确实添加了一些图片
请发布呈现的 HTML。 .net 在这里无关紧要。您应该在问题中创建一个代码 sn-p，或链接到 bootply 等网站上的示例。
好的，让我试试

标签： javascript jquery css html twitter-bootstrap

【解决方案1】：

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

当您导航到“管理”选项卡时，该 url 是否在路径中包含单词 SuperAdmin 或 Admin？

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

【讨论】：

【解决方案2】：

该错误似乎正在发生，因为我正在检查 Absolute Uri 是否包含“管理”一词，这对于两个选项卡都是正确的。我只是将路由更改为一个新名称“SuperAdmin”，而不是通过并更改我的控制器名称。

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

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

然后检查 Uri 是否包含它：

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

这暂时解决了这个问题。

【讨论】：