突出显示选定的选项卡答案

【问题标题】：highlight the selected tab突出显示选定的选项卡
【发布时间】：2016-12-02 02:47:40
【问题描述】：

我正在开发 angularJs 和引导应用程序。目前正在使用 angularJS 创建选项卡，我想突出显示选定的选项卡，以便用户可以轻松识别突出显示的选项卡已被选中。 请建议如何用颜色突出显示选定的标签 #FBDFD9.

请找到现有的工作代码来显示标签：http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview

示例 html 代码：

<div ng-controller="TabsParentController">
    <tabset>
        <tab ng-repeat="workspace in workspaces"
             heading="{{workspace.name}}"
             active=workspace.active>
            <div ng-controller="TabsChildController">
                <div>
                    {{$parent.workspace.id}} : {{ $parent.workspace.name}}
                </div>
                <input type="text" ng-model="workspace.name"/>
            </div>     
        </tab>
        <tab select="addWorkspace()">
            <tab-heading>
                <i class="icon-plus-sign"></i>
            </tab-heading>
        </tab>
    </tabset>
</div>

--编辑--

请建议如何显示选项卡的轮廓。如果有许多选项卡，则它看起来就像一个没有任何轮廓的文本，表明它是一个选项卡。如果注意到 http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview 中的输出，则仅针对所选选项卡显示选项卡的轮廓。请建议如何显示所有选项卡（活动选项卡和非活动选项卡）的轮廓。我试图找到解决方案，但找不到合适的选项卡 ID 或类名来编写 css 代码以显示选项卡的外线。

【问题讨论】：

标签： javascript css angularjs angular-ui-bootstrap

【解决方案1】：

我使用 Chrome 检查了 HTML，以查看 Bootstrap 中使用了哪个 CSS 选择器来设置活动标签的样式。修改您的 CSS 以添加此规则：

.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
  background-color: #FBDFD9;
}

【讨论】：

【解决方案2】：

Bootstrap 将 active 类添加到活动选项卡中，因此只需在您的 css 中定位它：

.nav-tabs>.active>a {
  background-color: #FBDFD9;
}

由于选择器 .nav-tabs>.active>a 的特殊性与引导程序选择器的特殊性相同，因此要让您的样式覆盖使用 !important

.nav-tabs>.active>a {
  background-color: #FBDFD9; !important;
}

或者在index.html 中的引导程序之后放置您的自定义样式：

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">

这里是working example。

【讨论】：