angularui選項卡設置活動選項卡及其css

我目前有問題標籤的角度指令的樣式。我正在嘗試設置一個活動選項卡並取消選擇所有其他選項卡。但是，我沒有任何運氣。我曾嘗試使用由bootstrap託管的css，但這並沒有解決問題。我不確定從哪裏開始，但是朝正確方向的一點是有幫助的。angularui選項卡設置活動選項卡及其css

我做了一個Plunker來證明我的問題： http://plnkr.co/edit/ZjrG8uHS4sHq3pxgGVLu?p=preview

和下面的代碼：

的index.html

<!DOCTYPE html> 
<html ng-app="plunker"> 

<head> 
<meta charset="utf-8" /> 
<title>AngularJS Plunker</title> 
<link rel="stylesheet" href="style.css" /> 
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script> 
<script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script> 
<script src="app.js"></script> 
</head> 

<body ng-controller="MainCtrl" class="smooth_transition"> 
<tabset> 
    <tab heading="test1" > 
    <div class="tab-body" > 
     test1 should be red 
     <br/> 
     test2 should be white 
    </div> 
    </tab> 
    <tab heading="test2"> 
    <div class="tab-body" > 
     test1 should be white 
     <br/> 
     test2 should be red 
    </div> 
    </tab> 
</tabset> 
</body> 
</html>

app.js

var app = angular.module('plunker',["ngAnimate"]); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}) 
.directive('tab', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     template: '<div role="tabpanel" ng-show="active" ng-transclude class="smooth_transition"></div>', 
     require: '^tabset', 
     scope: { 
      heading: '@' 
     }, 
     link: function (scope, elem, attr, tabsetCtrl) { 
      scope.active = false; 
      tabsetCtrl.addTab(scope) 
     } 
    } 
}) 
.directive('tabset', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: {}, 
     templateUrl: 'tabset.html', 
     bindToController: true, 
     controllerAs: 'tabset', 
     controller: [ function() { 
      var self = this; 
      self.tabs = []; 
      self.addTab = function addTab(tab) { 
       self.tabs.push(tab); 

       if (self.tabs.length === 1) { 
        tab.active = true; 
       } 
      }; 
      self.select = function (selectedTab) { 
       angular.forEach(self.tabs, function (tab) { 
        if (tab.active && tab !== selectedTab) { 
         tab.active = false; 
        } 
       }); 
       selectedTab.active = true; 
      }; 
     }] 
    }; 
});

標籤集。 html

<div role="tabpanel" class="smooth_transition"> 
    <ul class="nav nav-tabs" role="tablist" class="smooth_transition"> 
    <li role="presentation" 
     ng-repeat="tab in tabset.tabs" class="smooth_transition"> 
     <a href="" 
      role="tab" 
      ng-click="tabset.select(tab)">{{tab.heading}}</a> 
    </li> 
    </ul> 
    <ng-transclude> 
    </ng-transclude> 
</div>

的style.css

.smooth_transition.ng-hide { 
    opacity: 0; 
} 

.smooth_transition.ng-hide-add { 
    position: absolute; 
    width: 100%; 
} 

.smooth_transition.ng-hide-remove { 
    transition: all linear 1s; 
    position: absolute; 
    width: 100%; 
} 

/*nav css*/ 
.nav { 
    padding-left: 0; 
    margin-bottom: 0; 
    list-style: none; 
    height: 50px; 
} 

.nav > li { 
    position: relative; 
    display: block; 
} 

.nav > li > a { 
    position: relative; 
    display: block; 
    padding: 10px 15px; 
} 

.nav-tabs { 
    width: 100%; 
} 

.nav-tabs > li { 
    background: white; 
    border: solid 1px black; 
    float: left; 
    margin-bottom: -1px; 
} 

.nav-tabs > li > a { 
    margin-right: 2px; 
    line-height: 1.42857143; 
    border: 1px solid transparent; 
    border-radius: 4px 4px 0 0; 
} 

.tab-body { 
    width: 100%; 
    border: solid 1px black; 
} 

.nav-tabs > li > a .active { 
    background: red; 
}

來源

2015-10-12 Sari Rahal

你的情況，你可以添加到ng-class="{active:tab.active}"你想突出了<li>或<a>的元素。

例如...

<ul class="nav nav-tabs" role="tablist" class="smooth_transition"> 
    <li role="presentation" 
     ng-repeat="tab in tabset.tabs" class="smooth_transition" 
     ng-class="{active:tab.active}"> 
     <a href="" 
      role="tab" 
      ng-click="tabset.select(tab)">{{tab.heading}} 
     </a> 
    </li> 
</ul>

然後改變你的CSS ...

.nav-tabs > li > a.active { 
    background : red; 
}

或者

.nav-tabs > li.active { 
    background : red; 
}

希望這有助於！

來源

2015-10-12 19:50:44 scotney

angularui選項卡設置活動選項卡及其css

回答

相關問題