引导导航选项卡未突出显示活动选项卡答案

【问题标题】：bootstrap nav tab is not highlighting the active tab引导导航选项卡未突出显示活动选项卡
【发布时间】：2015-03-16 18:14:24
【问题描述】：

我正在开发一个 asp.net mvc web 应用程序，我正在使用以下内容：-

1.bootstrap v2.0.4.

2.jQuery 1.11.2.

在视图中，我提供了以下导航选项卡：-

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


    <li >@Ajax.ActionLink("Show Related Servers", "CustomerServer","Customer",
    new {customerID = Model.AccountDefinition.ORG_ID},
    new AjaxOptions {
 InsertionMode = InsertionMode.Replace,
 UpdateTargetId = "detail"  ,
 LoadingElementId = "progress",

 OnSuccess="detailsuccess",



}
)</li>

    <li >@Ajax.ActionLink("Show Related VMs", "CustomerVM","Customer",
    new {customerID = Model.AccountDefinition.ORG_ID},
    new AjaxOptions {
 InsertionMode = InsertionMode.Replace,
 UpdateTargetId = "detail"  ,
 LoadingElementId = "progress",
  OnSuccess="detailsuccess"


}
)</li>

当用户点击它时，每个 Ajax.Actionlink 都会呈现一个局部视图。当前，当我将鼠标移到选项卡上时，选项卡背景颜色会改变，但如果我单击选项卡并呈现部分视图，则活动选项卡将不会突出显示..

我正在引用以下 css 文件：-

<link id="bs-css" href="~/Content/css/bootstrap-cerulean.css" rel="stylesheet">
<link href='~/Content/css/opa-icons.css' rel='stylesheet'>
<link href="~/Content/css/bootstrap-responsive.css" rel="stylesheet">
<link href="~/Content/start/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />

和以下脚本（在 courde 的 jquery js 中添加）：-

<script src="~/Scripts/js/bootstrap-tab.js"></script>

【问题讨论】：

标签： javascript jquery css twitter-bootstrap razor

【解决方案1】：

活动标签需要

class="active"

类

【讨论】：

我没有明白你的意思，如果我在标签内指定以下内容，那么即使用户没有点击它也会始终突出显示！！1
用户点击时可以使用jquery添加类。并在用户再次点击时删除该类。
你能在这方面提供更多建议吗？为什么 Bootstrap 中的默认情况不是这样？

【解决方案2】：

如果要突出显示，则需要将活动类添加到 li 元素。
示例：

<li class="active">

【讨论】：

但这将强制标签始终突出显示，而我需要突出显示用户点击的标签...
您需要从另一个元素中删除活动类并将其添加到您想要突出显示的元素中。