CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
kumara
kumara

Reputation: 937

Bootstrap tab active tab color

I m using the Bootstrap tab controller. Please check my sample

HTML

<div class="btn-group" role="group">
    <button type="button" id="shares" class="btn btn-primary" href="#one" data-toggle="tab"><span
            class="fa fa-address-card-o" aria-hidden="true"></span>
        <div class="hidden-xs">One</div>
    </button>
</div>
<div class="btn-group" role="group">
    <button type="button" id="shares" class="btn btn-primary" href="#two" data-toggle="tab"><span
            class="fa fa-address-card-o" aria-hidden="true"></span>
        <div class="hidden-xs">One</div>
    </button>
</div>

<div class="tab-content">
    <div class="tab-pane fade in active" id="one">
        One Content
    </div>
    <div class="tab-pane" id="two">
        Two Content
    </div>
</div>

I am using below jQuery code for highlighting a selected tab header.

$(document).ready(function() {
    $(".btn").click(function () {
        $(".btn").removeClass("btn-primary").addClass("btn-default");
        $(this).removeClass("btn-default").addClass("btn-primary");   
    });
});

Tabs are working well with the above function. But I need to do this function using Angular JS. Could you advise me, please?

Upvotes: 0

Views: 81

Answers (2)

krishna
krishna

Reputation: 1029

Please check this.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller='appController'>
  <div class="btn-group" role="group">
      <button type="button"
             ng-init="tab_1=true;class_name_1 ='btn-primary';" 
             ng-click="class_name_1 ='btn-primary'; class_name_2='btn-default'; tab_1=true; tab_2=false" 
             class="btn {{class_name_1}}">
              <span class="fa fa-address-card-o" aria-hidden="true"></span>
              <div class="hidden-xs">One</div>
      </button>
  </div>
  <div class="btn-group" role="group">
      <button type="button"
              ng-click="class_name_2 ='btn-primary' ; class_name_1='btn-default'; tab_2=true; tab_1=false" 
              class="btn {{class_name_2}}" >
              <span class="fa fa-address-card-o" aria-hidden="true"></span>
              <div class="hidden-xs">Two</div>
      </button>
  </div>

  <div class="tab-content">
      <div class="" ng-show="tab_1">
          One Content
      </div>
      <div  ng-show="tab_2">
          Two Content
      </div>
  </div>
<script>
var app = angular.module('app', []);
app.controller('appController', function($scope) {

});
</script>
</body>
</html>

Upvotes: 0

eustatos
eustatos

Reputation: 704

One of many ways

class AppController {
  constructor() {
    this.activeTab = 'One';
  }

  setActiveTab(tabName) {
    this.activeTab = tabName;
  }

  isActiveTab(tabName) {
    return tabName === this.activeTab;
  }
}

angular.module('app', [])
  .controller('appController', AppController);

angular.bootstrap(document.querySelector('#root'), ['app']);
html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<div id="root" ng-controller="appController as appController">
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary" ng-class="{'active': appController.activeTab ==='One'}">
    <input 
      ng-model="appController.activeTab" 
      type="radio" 
      name="options" 
      id="option1"
      value="One"
    > One
  </label>
    <label class="btn btn-primary" ng-class="{'active': appController.activeTab ==='Two'}">
    <input
      ng-model="appController.activeTab" 
      type="radio" 
      name="options" 
      value="Two"
      id="option2" 
    > Two
  </label>
  </div>


  <div class="tab-content">

    <div class="tab-pane" ng-class="{'fade in active': appController.isActiveTab('One')}">
      One Content
    </div>
    <div class="tab-pane" ng-class="{'fade in active': appController.isActiveTab('Two')}">
      Two Content
    </div>
  </div>
</div>

Upvotes: 2

Related Questions