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类添加到活动选项卡，因此只需将其定位到您的css中：

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

由于选择器.nav-tabs>.active>a的特异性与bootstrap选择器的特异性相同，要使样式覆盖使用!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。

突出显示所选选项卡

2 个答案: