Hi,
I have 2 tabs on form
currently by deafult it was selecting one tab
currently my requirement is that make tabs active and inactive after clicking of releavant tabs.
@{
Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.form = false;
$scope.form1 = false;
$scope.carname = "Volvo";
$scope.carname1 = "Volvo1";
$scope.tabs = false;
$scope.Add = function () {
$scope.tabs = true;
$scope.form = true;
$scope.HighlightAllowence = {
"color": "white",
"background-color": "coral"
}
}
$scope.allowence = function () {
$scope.form = true;
$scope.form1 = false;
$scope.HighlightAllowence = {
"color": "white",
"background-color": "coral"
}
$scope.HighlightDeduction = {}
}
$scope.deduction = function () {
$scope.form1 = true;
$scope.form = false;
$scope.HighlightDeduction = {
"color": "white",
"background-color": "coral"
}
$scope.HighlightAllowence = {}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="Add();" style="margin-left: 15px;">
Add
</button>
<div ng-show="tabs">
<div class="panel-heading">
<div class="row">
<ul class="nav nav-pills">
<li class="active" @*ng-style="HighlightAllowence"*@><a href="#" ng-click="kyc()">Allowence</a></li>
<li><a href="#" ng-click="deduction()">Deduction</a></li>
</ul>
</div>
<hr>
</div>
</div>
<div ng-show="form">
<h1>{{carname}}</h1>
</div>
<div ng-show="form1">
<h1>{{carname1}}</h1>
</div>
</body>
</html>
