Menu
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
342
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
188
You can use ng-class to conditionally add or remove a classname.
Fiddle
<div class="tab" ng-click="tab = 1" ng-class="{tabactive:tab === 1}">tab1</div>
<div class="tab" ng-click="tab = 2" ng-class="{tabactive:tab === 2}">tab2</div>
Then include the class you wish to add when the condition is met.
.tabactive{
border-bottom:0px solid #000;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
