突出显示所选选项卡

Question

我正在处理 angularJs 和 bootstrap 应用程序。目前正在使用 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 代码来显示标签的外线。

Answer 1

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

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

Answer 2

Bootstrap 将 active class 添加到活动选项卡，因此只需将其定位到您的 css:

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

由于选择器 .nav-tabs>.active>a 的特性与 bootstrap 的选择器的特性相同，要覆盖您的样式，请使用 !important

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

或将您的自定义样式放在 index.html 中的 bootstrap 之后：

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

突出显示所选选项卡

highlight the selected tab

javascript

css

angularjs

angular-ui-bootstrap