我正在开发一个Web应用程序前端,我遇到了这个问题。我第一次加载页面时,我有https://duaw26jehqd4r.cloudfront.net/items/1Q1l2J0s1u3g3704301f/Screen%20Shot%202013-11-20%20at%208.10.35%20PM.png?v=970d0170
此应用程序使用angular.js
这是代码
<div class="dropdown changeOutput pull-left">
<a class="dropdown-toggle btn" data-toggle="dropdown">{{aqQuery.selectedUnit.label | metricName}} <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li ng-repeat="unit in aqQuery.availableUnits">
<a ng-class="{active: aqQuery.selectedUnit.unit == unit.unit}"
ng-click="select(unit)">{{unit.label}}</a>
</li>
</ul>
</div>
这就是CSS
.changeOutput > a,
.report-btn > a,
.calendar-btn > a {
background: none;
border: none;
box-shadow: none;
color: #333;
font-weight: bold;
margin-top: 4px;
padding: 6px;
text-shadow: none;
text-transform: uppercase;
font-size: 13px;
}
.changeOutput > a .caret,
.report-btn > a .caret{
margin: 6px 0 0 2px;
}
.changeOutput li a.active {
color: #0088cc;
}
.changeOutput li a.active:hover {
color: #ffffff;
}
.changeOutput .monitor-ico {
background-position: -160px -1px;
}
.changeOutput .monitor-ico.active,
.changeOutput .monitor-ico:active {
background: none;
background-image: url(monitor-sprite.png);
background-position: -160px -30px;
}
.changeOutput .monitor-ico:first-child {
background-position: -73px -1px;
margin-right: 5px;
}
.changeOutput .monitor-ico:first-child.active,
.changeOutput .monitor-ico:first-child:active {
background-position: -73px -30px;
}