Question

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

我想用圆角显示所有标签的边框，并突出显示所选标签，如下图所示。我尝试使用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>

Answer 1

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

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

它应为所有非活动标签添加红色边框。您可以通过添加到当前用于将背景设置为粉红色的css规则为活动选项卡添加边框。

圆角并突出显示所选的一个

1 个答案: