Я работаю над угловым применением JS. У меня есть веб-страница с несколькими вкладками, созданными с помощью angularJs. Пожалуйста, ознакомьтесь с примером рабочих вкладок: http://plnkr.co/edit/jHsdUtw6IttYQ24A7SG1?p=previewзакругленные углы и выделить выделение
Я хочу показать границу всех вкладок с закругленными углами и выделить выделенную вкладку, как показано на рисунке ниже. Я пробовал использовать css, но не мог достичь ожидаемого. Пожалуйста, предложите.
Код:
<html>
<head>
<script data-require="[email protected]" 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 вы пытались добавить '! Important'? Например: .nav-tabs> .active> a. .nav-tabs> .active> a: hover, .nav-tabs> .active> a: focus { background-color: pink! Important; } – Mickers
@ Микеры - Да, я старался, чтобы вкладка выглядела в прикрепленном изображении с закругленными углами и выделяла выбранную вкладку, которую я не мог достичь. – javaUser
По возможности избегайте использования '! Important'. – Yatrix