Bootstrap 选项卡活动选项卡颜色

Question

我正在使用 Bootstrap 选项卡控制器。 请检查我的样品

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>

Answer 2

请检查这个。

<!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>

Bootstrap 选项卡活动选项卡颜色

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-03-06 06:56:50

解决方案2
0 2020-03-06 16:29:13

Bootstrap 选项卡活动选项卡颜色

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-03-06 06:56:50

解决方案2 0 2020-03-06 16:29:13

解决方案1
2 已采纳 2020-03-06 06:56:50

解决方案2
0 2020-03-06 16:29:13