AngularJS | Tab

by kenta_torii

HTML

<div ng-init="tab=1">
	<ul>
		<li class="tab" ng-class="{active:tab==1}">
			<a href ng-click="tab = 1">Tab 1</a>
		</li>
	    <li class="tab" ng-class="{active:tab==2}">
			<a href ng-click="tab = 2">Tab 2</a>
		</li>
	    <li class="tab" ng-class="{active:tab==3}">
			<a href ng-click="tab = 3">Tab 3</a>
		</li>
	</<ul>

	<p class="tab-content" ng-show="tab==1">Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
	<p class="tab-content" ng-show="tab==2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
	<p class="tab-content" ng-show="tab==3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
</div>

CSS

*{
    font-family: Arial;
    font-size: 13px;
    line-height: 140%;
}
h3.tab{
    margin: 0;
}
ul{
    overflow:hidden;
    margin: 0;
    padding: 0;
}
li{
    display:inline-block;
}
li a{
    padding: 10px 15px;
    background: #ddd;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    display:block;
}
.tab-content{
    border: 1px solid #ddd;
    padding: 10px;
    margin:0
}

JavaScript

var app = angular.module('myApp',[]);