ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Set Tab Active class on Click in AngularJS<p>Hi <a class="username" rel="mahesh213">mahesh213</a>,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <div class="demo_block"> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;Active Bootstrap Tab&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;myApp&#39;, []); app.controller(&#39;myCtrl&#39;, function ($scope) { $scope.carname = &#34;Volvo&#34;; $scope.carname1 = &#34;Volvo1&#34;; $scope.tabs = false; $scope.Add = function () { $scope.tabs = true; $scope.FormShown = &#39;Allowence&#39;; $scope.TabActived = &#39;Allowence&#39;; } $scope.ActiveTab = function (tab) { $scope.FormShown = tab; $scope.TabActived = tab; } }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;myApp&#34; ng-controller=&#34;myCtrl&#34;&gt; &lt;button ng-click=&#34;Add();&#34; style=&#34;margin-left: 15px;&#34; class=&#34;btn btn-Success btn-sm&#34;&gt; Add &lt;/button&gt; &lt;div ng-show=&#34;tabs&#34;&gt; &lt;div class=&#34;panel-heading&#34;&gt; &lt;div class=&#34;row&#34;&gt; &lt;ul class=&#34;nav nav-pills&#34;&gt; &lt;li ng-class=&#34;{&#39;active&#39;: TabActived == &#39;Allowence&#39;}&#34;&gt;&lt;a href=&#34;#&#34; ng-click=&#34;ActiveTab(&#39;Allowence&#39;)&#34;&gt; Allowence&lt;/a&gt; &lt;/li&gt; &lt;li ng-class=&#34;{&#39;active&#39;: TabActived == &#39;Deduction&#39;}&#34;&gt;&lt;a href=&#34;#&#34; ng-click=&#34;ActiveTab(&#39;Deduction&#39;)&#34;&gt; Deduction&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div ng-show=&#34;FormShown==&#39;Allowence&#39;&#34;&gt; &lt;h1&gt;{{carname}}&lt;/h1&gt; &lt;/div&gt; &lt;div ng-show=&#34;FormShown==&#39;Deduction&#39;&#34;&gt; &lt;h1&gt;{{carname1}}&lt;/h1&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p>https://www.aspforums.net:443/Threads/896877/Set-Tab-Active-class-on-Click-in-AngularJS/https://www.aspforums.net:443/Threads/896877/Set-Tab-Active-class-on-Click-in-AngularJS/Fri, 16 Aug 2019 07:25:21 GMT