2016-12-02 11 views
0

私はangularJSアプリケーションで作業しています。私は、angularJsを使用して作成された複数のタブを持つウェブページを持っています。 作業中のタブの例をご覧ください:http://plnkr.co/edit/jHsdUtw6IttYQ24A7SG1?p=preview角を丸くして選択したものを強調表示します

すべてのタブの境界線を丸くして表示し、下の図のように選択したタブをハイライトしたいとします。私はCSSを使ってみましたが、期待どおりに達成できませんでした。提案してください。 Please click here to view image of the Tabs as expected to be

コード:

.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> 
+0

あなたのCSSでは '重要!'を追加しようとしましたか?同様に: .nav-tabs> .active> a、.nav-tabs> .active> a:ホバー、.nav-tabs> .active> a:focus { 背景色:ピンク! } – Mickers

+0

@Mickers - はい、私は、タブが丸みを帯びたコーナーで添付画像を見て、私が達成できなかった選択したタブを強調表示する方法を試していました。 – javaUser

+0

可能な限り、 '!important'を使わないでください。 – Yatrix

答えて

0

してみてください。アクティブなタブにボーダーを追加するには、現在背景ピンクを設定するために使用しているCSSルールを追加します。

関連する問題