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

阅读() @2019-03-17 16:05:14

通过AngularJs实现Tab选项卡切换效果,代码如下:

文件一:3.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body ng-app="app" ng-controller="ctr">
	<zym-blog title="赵一鸣AngularJs学习笔记"></zym-blog>
</body>
</html>
<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctr', ['$scope', function($scope){
		$scope.data = [
			{id: 1, title: 'SEO', data: [{id: 1, title: '用户需求分析'}, {id: 2, title: '数据分析'}]},
			{id: 1, title: 'PHP', data: [{id: 1, title: '面向对象开发'}, {id: 2, title: '数据库优化'}]},
			{id: 1, title: 'WEB前端开发', data: [{id: 1, title: 'javascript'}, {id: 2, title: 'html5+css3'}]}
		];
	}]);
	m.directive('zymBlog', [function(){
		return {
			restrict : 'E',
			templateUrl : './4.html',
			replace : true,
			/*controller : ['$scope', function($scope){
				$scope.data = [
					{id: 1, title: 'SEO', data: [{id: 1, title: '用户需求分析'}, {id: 2, title: '数据分析'}]},
					{id: 1, title: 'PHP', data: [{id: 1, title: '面向对象开发'}, {id: 2, title: '数据库优化'}]},
					{id: 1, title: 'WEB前端开发', data: [{id: 1, title: 'javascript'}, {id: 2, title: 'html5+css3'}]}
				];
			}],*/
			link : function(scope, element, attr){
				console.log(attr);
				$(element).on('click', 'a', function(){
					var $index = $(this).index();
					$(this).addClass('active').siblings('a').removeClass('active');
					$(element).find('.lists').eq($index).show().siblings('.lists').hide();
				});
			}
		}
	}]);
</script>

文件二:4.html:

<div class="ng-navbox">
	<style type="text/css">
		.ng-navbox-head a{display:inline-block;padding:5px 10px;font-size:14px;text-decoration:none;}
		.active{background-color:#f00;color:#fff;}
	</style>
	<div class="ng-navbox-head">
		<a href="javascript:;" ng-repeat="(key, value) in data" ng-class="{'active':$first}">{{value.title}}</a>
	</div>
	<div class="ng-navbox-content">
		<ul ng-repeat="(k, v) in data" ng-style="{'display':$first?'block':'none'}" class="lists">
			<li ng-repeat="(m, n) in v.data">{{n.title}}</li>
		</ul>
	</div>
</div>

AngularJs和JQueryJs结合使用操作DOM元素,实现选项卡切换效果!

微信二维码