javascript - 引导选项卡活动选项卡颜色
问题描述
我正在使用 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 来完成这个功能。请给我建议好吗?
解决方案
多种方式之一
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>
推荐阅读
- javascript - 使用 removeChild() 删除损坏的图像?
- sql-server - jpa'limit'附近的语法不正确
- javascript - 刷新页面,直到特定字符串出现在页面的某个部分
- angular - 输入占位符中显示的表单验证器
- ios - 使用 Alamofire 解析可编码响应
- sql - 我无法使用 ADF v2 将包含 " , / 的字符串值从 .csv 加载到 SQL 中
- php - 有没有办法在一个控制器上同时使用动态和静态路径?
- python - 如何使 pandas.Series.str.split 与空数据集一起使用
- ios - 如何为服务器视图共享 viewMode Driver 属性?
- javascript - 将对象转换为对象数组后,我需要更改子组件的 props 参数吗?