-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo59.html
78 lines (76 loc) · 1.62 KB
/
demo59.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航样式选中</title>
<script src='js/angular.js'></script>
<style>
*{
list-style: none;
margin: 0;
padding: 0;
}
.listbox{
width:600px;
height: 30px;
margin: 0 auto;
border: 1px solid #ccc;
box-shadow: 2px 2px 3px #333;
}
.listbox li{
width: 100px;
float: left;
height: 30px;
line-height: 32px;
text-align: center;
cursor: pointer;
font-weight: bold;
color: #333;
font-family: '微软雅黑';
border-radius:15px;
}
.listbox li.cour{
background: skyblue;
color:#fff;
text-shadow:1px 1px 1px #333;
}
</style>
</head>
<body ng-app='App'>
<ul ng-controller='cont' class='listbox'>
<li ng-repeat=' i in list' ng-click='cour($index)' ng-class="{ true :'cour',false:''} [i.isclick]">{{i.text}}</li>
</ul>
<script>
var data = [{
text: 'Home',
isclick: false
}, {
text: 'News'
}, {
text: 'Project',
isclick: false
}, {
text: 'Cooperate',
isclick: false
}, {
text: 'About Us',
isclick: false
}, {
text: 'More',
isclick: false
}];
var APP = angular.module('App', []); //定义angular模块
APP.controller('cont', function($scope) { //angular控制器
$scope.list = data; //注入数据
$scope.list[0].isclick = true; //首个加样式
$scope.cour = function(index) {
//这里用了js实现的,不用js用angular要怎么实现
for (var i = 0; i < $scope.list.length; i++) {
$scope.list[i].isclick = false; //点击的时候其他的都不加样式
}
$scope.list[index].isclick = true; //ng-click时当前的添加样式
}
})
</script>
</body>
</html>