angularjs 怎么用点击事件控制上一级的class
我想用angularjs控制li的class,当点击data1的时候添加active，data2不添加，如果data2有active类，就要移除，就是正常的一个sideb...
我想用angularjs控制li的class,当点击data1的时候添加active，data2不添加，如果data2有active类，就要移除，就是正常的一个sidebar。用jquery很容易实现的，可是用angularjs 我就不会了，求指教。
<ul>
<li class="" ng-class="{active:show()}">
<a href="#/data/data1/0" ng-click="click($event.target)">data1</a>
</li>
<li class="" ng-class="{active:show()}">
<a href="#/data/data2/0" ng-click="click($event.target)">data2</a>
</li>
</li> 展开
<ul>
<li class="" ng-class="{active:show()}">
<a href="#/data/data1/0" ng-click="click($event.target)">data1</a>
</li>
<li class="" ng-class="{active:show()}">
<a href="#/data/data2/0" ng-click="click($event.target)">data2</a>
</li>
</li> 展开
1个回答
展开全部
<!DOCTYPE html>
<html ng-app="test">
<head>
<title></title>
<!-- 注意改成你本地的路径 -->
<script type="text/javascript" src="../lib/angular.min.js"></script>
<style type="text/css">
ul{
list-style: none;
padding: 0;
}
a{
text-decoration: none;
}
.active{
background: red;
color: #fff;
}
ul{
display: -webkit-box;
}
li{
-webkit-box-flex:1;
text-align: center;
padding:10px 0;
cursor: pointer;
}
li:hover{
color: blue;
}
</style>
</head>
<body>
<ul ng-controller="NavController">
<li ng-repeat="i in data" ng-click="active($index)" class="{{i.active}}">{{i.text}}</li>
</ul>
<script type="text/javascript">
var app = angular.module('test', []);
app.controller('NavController', function($scope){
$scope.data = [
{
text: 'AAA'
},
{
text: 'BBB'
},
{
text: 'CCC'
},
{
text: 'DDD'
},
{
text: 'EEE'
}
];
var lastChose = -1;
$scope.active = function(index){
//如果有选择过，就把选过的数据中active置空
(lastChose !== -1) && ($scope.data[lastChose].active = "");
$scope.data[index].active = "active";
lastChose = index;
}
});
</script>
</body>
</html>
更多追问追答
追问
这个li要是不是数组里的呢 就在 页面当中写好的那种，固定的，因为这个要用到好多地方呢，不想把li写到数组里。那我说的那种情况有方法解决么？我还想问一个问题，就是我的sidebar只有点击点击第二次的时候才会添加上active属性，而且点击第一次时，还会闪跳一下，这是什么原因呢？是跟a标签里的href有关系么？我把href去掉了就没有这种情况了？麻烦你了，要是解决了，我会加分的
追答
把a标签里的href写成javascript:;
<a href="javascript:;">导航</a>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
