<!doctype html>
<html ng-app>
<head>
<title> AngularJS Tabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" ></script>
<script src="script.js"></script>
<style>
li {
float: left;
background-color: rgb(200,200,200);
padding: 5px 19px;
margin: 5px 2px 5px 0px;
color: black;
list-style: none;
}
li a {
text-decoration: none;
font-size: 21px;
font-style: italic;
}
.active{
background:#cc00cc;
}
</style>
</head>
<body>
<section ng-controller="mainCtrl">
<ul>
<li ng-class="{active:tab===1}">
<a href ng-click="tab = tab==1 ? a : 1">Tab1</a>
</li>
<li ng-class="{active:tab===2}">
<a href ng-click="tab = tab==2 ? a : 2">Tab2</a>
</li>
<li ng-class="{active:tab===3}">
<a href ng-click="tab = tab==3 ? a : 3">Tab3</a>
</li>
<br><br>
<p ng-show="tab === 1"> Tab1 content </p>
<p ng-show="tab === 2"> Tab2 content</p>
<p ng-show="tab === 3"> Tab3 content</p>
</ul>
</section>
</body>
</html>
<html ng-app>
<head>
<title> AngularJS Tabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" ></script>
<script src="script.js"></script>
<style>
li {
float: left;
background-color: rgb(200,200,200);
padding: 5px 19px;
margin: 5px 2px 5px 0px;
color: black;
list-style: none;
}
li a {
text-decoration: none;
font-size: 21px;
font-style: italic;
}
.active{
background:#cc00cc;
}
</style>
</head>
<body>
<section ng-controller="mainCtrl">
<ul>
<li ng-class="{active:tab===1}">
<a href ng-click="tab = tab==1 ? a : 1">Tab1</a>
</li>
<li ng-class="{active:tab===2}">
<a href ng-click="tab = tab==2 ? a : 2">Tab2</a>
</li>
<li ng-class="{active:tab===3}">
<a href ng-click="tab = tab==3 ? a : 3">Tab3</a>
</li>
<br><br>
<p ng-show="tab === 1"> Tab1 content </p>
<p ng-show="tab === 2"> Tab2 content</p>
<p ng-show="tab === 3"> Tab3 content</p>
</ul>
</section>
</body>
</html>
In JS-->
function mainCtrl($scope) {
$scope.tab = 2;
}
No comments:
Post a Comment