您的位置：首页 > Web前端 > AngularJS

4000 通过AngularJs实现Tab选项卡切换效果

2018-02-09 14:03 645 查看
通过AngularJs实现Tab选项卡切换效果，代码如下：文件一：3.html：
01
<!DOCTYPE html>
02
<html lang=
"en"
>
03
<
head
>
04
    
<meta charset=
"UTF-8"
>
05
    
<title>Document</title>
06
</
head
>
07
<body ng-app=
"app"
 
ng-controller=
"ctr"
>
08
    
<zym-blog title=
"赵一鸣AngularJs学习笔记"
></zym-blog>
09
</body>
10
</html>
11
<script 
type
=
"text/javascript"
 
src=
"http://www.zymseo.com/js/demo.js"
></script>
12
<script 
type
=
"text/javascript"
 
src=
"http://www.zymseo.com/js/angular.min.js"
></script>
13
<script 
type
=
"text/javascript"
>
14
    
var m = angular.module(
'app'
, []);
15
    
m.controller(
'ctr'
, [
'$scope'
, 
function
($scope){
16
        
$scope.data = [
17
            
{
id
: 1, title: 
'SEO'
, data: [{
id
: 1, title: 
'用户需求分析'
}, {
id
: 2, title: 
'数据分析'
}]},
18
            
{
id
: 1, title: 
'PHP'
, data: [{
id
: 1, title: 
'面向对象开发'
}, {
id
: 2, title: 
'数据库优化'
}]},
19
            
{
id
: 1, title: 
'WEB前端开发'
, data: [{
id
: 1, title: 
'javascript'
}, {
id
: 2, title: 
'html5+css3'
}]}
20
        
];
21
    
}]);
22
    
m.directive(
'zymBlog'
, [
function
(){
23
        
return
 
{
24
            
restrict : 
'E'
,
25
            
templateUrl : 
'./4.html'
,
26
            
replace : 
true
,
27
            
/*controller : [
'$scope'
, 
function
($scope){
28
                
$scope.data = [
29
                    
{
id
: 1, title: 
'SEO'
, data: [{
id
: 1, title: 
'用户需求分析'
}, {
id
: 2, title: 
'数据分析'
}]},
30
                    
{
id
: 1, title: 
'PHP'
, data: [{
id
: 1, title: 
'面向对象开发'
}, {
id
: 2, title: 
'数据库优化'
}]},
31
                    
{
id
: 1, title: 
'WEB前端开发'
, data: [{
id
: 1, title: 
'javascript'
}, {
id
: 2, title: 
'html5+css3'
}]}
32
                
];
33
            
}],*/
34
            
link : 
function
(scope, element, attr){
35
                
console.log(attr);
36
                
$(element).on(
'click'
, 
'a'
, 
function
(){
37
                    
var $index = $(this).index();
38
                    
$(this).addClass(
'active'
).siblings(
'a'
).removeClass(
'active'
);
39
                    
$(element).
find
(
'.lists'
).
eq
($index).show().siblings(
'.lists'
).hide();
40
                
});
41
            
}
42
        
}
43
    
}]);
44
</script>
文件二：4.html：
01
<div class=
"ng-navbox"
>
02
    
<style 
type
=
"text/css"
>
03
        
.ng-navbox-
head
 
a{display:inline-block;padding:5px 10px;font-size:14px;text-decoration:none;}
04
        
.active{background-color:
#f00;color:#fff;}
05
    
</style>
06
    
<div class=
"ng-navbox-head"
>
07
        
<a href=
"javascript:;"
 
ng-repeat=
"(key, value) in data"
 
ng-class=
"{'active':$first}"
>{{value.title}}</a>
08
    
</div>
09
    
<div class=
"ng-navbox-content"
>
10
        
<ul ng-repeat=
"(k, v) in data"
 
ng-style=
"{'display':$first?'block':'none'}"
class=
"lists"
>
11
            
<li ng-repeat=
"(m, n) in v.data"
>{{n.title}}</li>
12
        
</ul>
13
    
</div>
14
</div>
AngularJs和JQueryJs结合使用操作DOM元素，实现选项卡切换效果！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航