通过AngularJs实现Tab选项卡切换效果,代码如下:
文件一:3.html:
04 | <meta charset= "UTF-8" > |
05 | <title>Document</title> |
07 | <body ng-app= "app" ng-controller= "ctr" > |
08 | <zym-blog title= "赵一鸣AngularJs学习笔记" ></zym-blog> |
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){ |
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' }]} |
22 | m.directive( 'zymBlog' , [ function (){ |
25 | templateUrl : './4.html' , |
27 | /*controller : [ '$scope' , function ($scope){ |
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' }]} |
34 | link : function (scope, element, 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(); |
|
文件二: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: |
06 | <div class= "ng-navbox-head" > |
07 | <a href= "javascript:;" ng-repeat= "(key, value) in data" ng-class= "{'active':$first}" >{{value.title}}</a> |
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> |
|
AngularJs和JQueryJs结合使用操作DOM元素,实现选项卡切换效果!