点击项目时如何设置背景颜色？
点击项目时如何设置背景颜色？
提问于 2015-06-08 04:54:49
<ul class="ul_nav">
<li ng-class="class" ng-click="changeClass()">Marketing</li>
<li ng-class="class" ng-click="changeClass()">Sells Team Nestle</li>
<li ng-class="class" ng-click="changeClass()">Marketing Test</li>
<li ng-class="class" ng-click="changeClass()">Marketing </li>
</ul>Angularjs
$scope.changeClass = function(){
if ($scope.class === "nav_color")
$scope.class = "nav_active";
else
$scope.class = "nav_color";
};CSS
.ul_nav{
margin-top:15px;
list-style:none;
padding:0;
height:600px;
}
.ul_nav > li{
padding: 3px 0 3px 25px;
cursor:pointer;
}
.ul_nav > li:hover{
background:#ff9900;
color:#fff;
}
.nav_color{
background:#fff;
color:#000;
}
.nav_active{
background:#ff9900;
color:#fff;
}在这里，我可以改变导航的背景颜色。但当我点击一个项目，它将改变所有4个项目的背景色。如何解决这个问题。柱塞
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-08 05:06:37
HTML：
<ul class="ul_nav">
<li ng-class="{class : classVar==='Marketing" }' ng-click="changeClass('Marketing')">Marketing</li>
<li ng-class="{class : classVar==='Sells' }" ng-click="changeClass('Sells')">Sells Team Nestle</li>
<li ng-class="{class : classVar==='MarketingTest' }" ng-click="changeClass('MarketingTest')">Marketing Test</li>
<li ng-class="{class : classVar==='Marketing1' }" ng-click="changeClass('Marketing1')">Marketing </li>
</ul>联署材料：
$scope.changeClass = function(value){
$scope.classVar= value;
};
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};检查这个柱塞
Stack Overflow用户
发布于 2015-06-08 05:23:27
您需要对代码进行以下更改。
标记
<ul class="ul_nav">
<li ng-class="class1" ng-click="changeClass('class1')">Marketing</li>
<li ng-class="class2" ng-click="changeClass('class2')">Sells Team Nestle</li>
<li ng-class="class3" ng-click="changeClass('class3')">Marketing Test</li>
<li ng-class="class4" ng-click="changeClass('class4')">Marketing </li>
</ul>码
$scope.changeClass = function(className) {
className = (className === "nav_color") ? "nav_active" : "nav_color";
};普朗克
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30701446
复制相关文章
相似问题
腾讯云开发者
