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

最新推荐文章于 2018-03-28 11:00:01 发布

K'illCode

最新推荐文章于 2018-03-28 11:00:01 发布

阅读量1.1k

点赞数

分类专栏： angularJS 文章标签： angularJs

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

通过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>