【发布时间】：2014-12-05 06:20:55
【问题描述】：
我有引导选项卡，我想根据从服务器接收到的数据（相应数据集的颜色代码）将一些 css 属性分配给活动选项卡。如何使用 angularjs 将边框颜色的 css 值覆盖到活动选项卡？
这是 HTML 和 CSS 代码：
<div class="tabbable tabs-left">
<!--style for the tabs border -->
<ul id='myTabs' class="nav nav-tabs" ng-style="{'border-right-color':[currentData.colorCode]}">
<!-- Active tab -->
<li ng-class="getTabClass(0)" ng-click="setActiveTab(0)" class="active"><a href="#tab0" data-toggle="tab">Set 1</a></li>
<li ng-class="getTabClass(1)" ng-click="setActiveTab(1)" ><a href="#tab1" data-toggle="tab">Set 2</a></li>
<li ng-class="getTabClass(0)" ng-click="setActiveTab(2)"><a href="#tab0" data-toggle="tab">Set 3</a></li>
<li ng-class="getTabClass(1)" ng-click="setActiveTab(3)" ><a href="#tab1" data-toggle="tab">Set 4</a></li>
</ul>
CSS 代码：
.tabs-left>.nav-tabs .active>a, .tabs-left>.nav-tabs .active>a:hover, .tabs-left>.nav-tabs .active>a:focus {
border-color: #ddd transparent #ddd #ddd;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
color: #555555;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
【问题讨论】：
-
你能提供你的控制器函数getTabClass(#)
-
只需在引导 CSS 之后将 CSS 加载到页面中，您的 CSS 将优先，只要您的规则至少与引导 CSS 中的规则一样具体。还是您尝试添加的 CSS 是动态的？
-
@SoEzPz，这是我的 getTabClass(#) 函数： $scope.getTabClass = function (tabNum) { return tabClasses[tabNum]; $scope.style = function(value) { return { "background-color": value }; } };
-
@Enzey，我想通过 angularjs 加载动态 CSS 属性。这些值将从服务器返回。我希望它能澄清这个问题。
-
澄清一下，您想更改活动 li 元素的 CSS 吗？或者基于哪个li处于活动状态的ul边框颜色？
标签： javascript css angularjs twitter-bootstrap-3 angular-ui