2016-12-02 2 views
0

Я работаю над угловым применением JS. У меня есть веб-страница с несколькими вкладками, созданными с помощью 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="[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> 
+0

В вашем css вы пытались добавить '! Important'? Например: .nav-tabs> .active> a. .nav-tabs> .active> a: hover, .nav-tabs> .active> a: focus { background-color: pink! Important; } – Mickers

+0

@ Микеры - Да, я старался, чтобы вкладка выглядела в прикрепленном изображении с закругленными углами и выделяла выбранную вкладку, которую я не мог достичь. – javaUser

+0

По возможности избегайте использования '! Important'. – Yatrix

ответ

0

Попробуйте добавить это правило CSS в CSS у вас уже есть:

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

Необходимо добавить красную границу для всех неактивных вкладок. Вы можете добавить границу на активную вкладку, добавив к правилу css, которое вы в настоящее время используете, чтобы установить фоновый розовый.