Angular JS tabs CSS

Question

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

Your demo seems to be working. Your best bet would be to turn this into a directive. Take a look at bootstrap UI for ideas. angular-ui.github.io/bootstrap — Rob
– Rob, Commented Dec 9, 2013 at 17:47

KayakDave · Accepted Answer · 2013-12-09 18:33:56Z

5

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

edited Dec 9, 2013 at 18:33

answered Dec 9, 2013 at 18:22

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wilson Over a year ago

How do I remove the line between tab1 and tabcontent directly?

KayakDave Over a year ago

Could you elaborate on what you mean by directly? Even if it's not selected?

Jonathan Palumbo · Accepted Answer · 2013-12-09 18:21:57Z

2

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

answered Dec 9, 2013 at 18:21

Jonathan Palumbo

6,8711 gold badge31 silver badges40 bronze badges

Collectives™ on Stack Overflow

Angular JS tabs CSS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related