Angular JS tabs CSS

angularjs, css

Solution

One option is to use `ng-class` where we add a class (for instance `selected`) on the "selected" tab. For example:

<div class="tab" ng-class="{selected: tab==1}" ng-click="tab = 1">tab1</div>
<div class="tab" ng-class="{selected: tab==2}" ng-click="tab = 2">tab2</div>

The above`{selected: tab==1}` says to add the class "selected" if the condition "tab == 1" is true.

And then add css for the `selected` tab. For instance to remove the bottom border on the selected item:

.selected {
    border-bottom: none;
}

Updated fiddle

Problem

I am trying to build a tab page with my website using AngularJS only. I saw somewhere that it is not advisable to augment AngularJS with Jquery. I have difficulties in remove the line between the tab and the tab content. E.g. When tab 1 is chosen, then the line below tab 1 will disappear. Can anyone help with the CSS question? Thank you. My HTML ``` <html ng-app> <div class="tabgroup" ng-init="tab=1"> <div class="tab" ng-click="tab = 1">tab1</div> <div class="tab" ng-click="tab = 2">tab2</div> </div> <div class="tabcontents"> <div ng-show="tab == 1"> tab 1 contents </div> <div ng-show="tab == 2"> tab 2 contents </div> </html> </div> ``` Current CSS ``` .tabgroup{ background:white; } .tab{ color:black; display:inline-block; border: 1px solid #000000; padding: 5px; } .tabcontents{ border: 1px solid #000000; padding: 5px; } ``` This is my Fiddle

Original source