gpt4 book ai didi

javascript - 圆 Angular 并突出显示所选的一个

转载 作者:行者123 更新时间:2023-11-28 04:46:19 25 4
gpt4 key购买 nike

我正在开发 angularJS 应用程序。我有一个网页,其中包含使用 angularJs 创建的多个选项卡。请找到工作选项卡示例:http://plnkr.co/edit/jHsdUtw6IttYQ24A7SG1?p=preview

我想用圆 Angular 显示所有选项卡的边框,并突出显示所选选项卡,如下图所示。我尝试使用 css 但无法达到预期效果。请建议。 Please click here to view image of the Tabs as expected to be

代码:

<html>   
<head>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<style>
.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
background-color: pink;
}
.pageSecTitle,.sel td:nth-child(2) {
border: 0;
}
td select {
vertical-align: top;
}

</style>
<script>
//controller for tabs
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller("TabsParentController", function ($scope) {
var setAllInactive = function() {
angular.forEach($scope.workspaces, function(workspace) {
workspace.active = false;
});
};
$scope.workspaces =
[
{ id: 1, name: "Tab1", active:true},
{ id: 2, name: "Tab2", active:false},
{ id: 3, name: "Tab3", active:false}
];
$scope.addWorkspace = function () {
setAllInactive();
};
});
app.controller ("TabsChildController", function($scope, $log){
});
</script>
</head>
<body>
<br><br>
<div ng-controller="TabsParentController">
<tabset>
<tab ng-repeat="workspace in workspaces"
heading="{{workspace.name}}"
active=workspace.active>
<div ng-controller="TabsChildController">
--some dynamic content here--
</div>
</tab>
</tabset>
</div>
</body>
</html>

最佳答案

尝试将此 css 规则添加到您已有的 css 中:

.nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
border: 1px solid red;
}

它应该为所有非事件选项卡添加一个红色边框。您可以通过添加到当前用于设置粉红色背景的 css 规则来为事件选项卡添加边框。

关于javascript - 圆 Angular 并突出显示所选的一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40940850/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com