javascript - Bootstrap 选项卡事件选项卡颜色

Question

我正在使用 Bootstrap 选项卡 Controller 。请检查我的样本

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>

我使用下面的 jQuery 代码来突出显示选定的选项卡标题。

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

选项卡与上述功能配合良好。但我需要使用 Angular JS 来完成这个功能。请您给我建议好吗？

Answer 1

多种方法之一

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>