0
私はangularJSアプリケーションで作業しています。私は、angularJsを使用して作成された複数のタブを持つウェブページを持っています。 作業中のタブの例をご覧ください:http://plnkr.co/edit/jHsdUtw6IttYQ24A7SG1?p=preview角を丸くして選択したものを強調表示します
すべてのタブの境界線を丸くして表示し、下の図のように選択したタブをハイライトしたいとします。私はCSSを使ってみましたが、期待どおりに達成できませんでした。提案してください。
コード:
.nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
border: 1px solid red;
}
それは、すべての非アクティブなタブの赤い枠を追加する必要があります:あなたが既に持っているCSSに、この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では '重要!'を追加しようとしましたか?同様に: .nav-tabs> .active> a、.nav-tabs> .active> a:ホバー、.nav-tabs> .active> a:focus { 背景色:ピンク! } – Mickers
@Mickers - はい、私は、タブが丸みを帯びたコーナーで添付画像を見て、私が達成できなかった選択したタブを強調表示する方法を試していました。 – javaUser
可能な限り、 '!important'を使わないでください。 – Yatrix