javaUser javaUser - 8 days ago 4
CSS Question

highlight the selected tab

I am working on angularJs and bootstrap application.
Currently working on creating a tabs using angularJS, i want to highlight the selected tab so that users can easily recognize that the tab highlighted is selected. Please suggest how to highlight the selected tab with color #FBDFD9.

Please find the exisiting working code to display tabs : http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview

sample html code:

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

Answer

I inspected the HTML with Chrome to see which CSS selector is being used in Bootstrap to style active tabs. Modify your CSS to add this rule:

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