выделите выбранную вкладку

Question

Я работаю над угловым и загрузочным приложением. В настоящее время, работая над созданием вкладок с помощью 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> 

--EDIT--

Пожалуйста, подсказывают, как показывают контуры вкладок. Если есть много вкладок, оно появляется точно так же, как текст без какого-либо контура, указывающего это как вкладку. Если вы заметили вывод в http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview, контур вкладки отображается только для выбранной вкладки. Советуйте, как показать контуры всех вкладок (активная вкладка и неактивные вкладки). Я попытался найти решение, но не смог найти соответствующий идентификатор или имя класса вкладки, чтобы написать код css, чтобы показать внешнюю строку вкладок.

Answer 1

Я проверил HTML с Chrome, чтобы узнать, какой селектор CSS используется в Bootstrap для создания активных вкладок. Измените 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.