angularjs实现tab切换

最新推荐文章于 2021-04-28 11:19:16 发布

Web攻城狮

最新推荐文章于 2021-04-28 11:19:16 发布

阅读量7.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angularjs tab切换

本文链接：https://blog.csdn.net/b1244154318/article/details/52613862

angularjs 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用 AngularJS 实现 Tab 动态切换的示例。通过自定义指令和控制器配合，实现了标签页的内容动态加载和样式切换。该示例包括了 HTML 结构、样式设置及 AngularJS 的交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angularjs实现tab切换

<!DOCTYPE html>
<html ng-app="myApp" >
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width:300px;
				margin:20px auto;
				height:200px;
			}
			#tab1 .first{
				background: #f40;
				color:#fff;
			}
			a{
				display:inline-block;
				width:75px;
				height:25px;
				line-height: 25px;
				color:black;
				text-decoration: none;
				border:0px solid gray;
				text-align: center;
			}
			#tab1 div{
				width: 300px;
				height: 200px;
				border: 1px solid #ddd;
				display: none;
			}
			#tab1 img{
				width: 100px;
				height: 100px;
				margin:0 auto;
			}
		</style>
	</head>
	<body ng-controller="show">
	<div class="box">
		<gr-tab gr-id="tab1" gr-data="data1" ></gr-tab>
	</div>	
	<!-- <gr-tab gr-id="tab1" gr-data="data1" ></gr-tab> -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script type="text/javascript">
			var app = angular.module('myApp',[]);
			app.directive('grTab',function(){  //自定义指令
				return {
					restrict : 'E', //定义标签属性
					templateUrl : 'tabqh1.html', //外部引入html文件
					replace : true, //把当前自定义的指令标签替换成引入的标签
					scope : { //作用域隔离 ： 每个作用域执行的是自己的功能
						grId : '@', //拿所有grId的字符串
						grData : '=' //拿所有grData属性的变量名
					},
					link : function( scope , element , attr ){ //dom操作
						element.delegate('a','click',function(){
							$(this).addClass('first').siblings('a').removeClass('first');
							$(this).siblings('div').eq($(this).index()).css('display','block').siblings('div').css('display','none')
						});
					}
				};
			})
			app.controller('show',['$scope',function($scope){
				$scope.data1 = [
					{'val':'小花','title':'它是一个比较帅气的男孩儿',"img":"img/img1.png"},
					{'val':'小兰','title':'它有着一张跟年龄不服的脸庞',"img":"img/img2.png"},
					{'val':'小光','title':'它是一个比较任性的男孩儿',"img":"img/img3.png"},
					{'val':'小赫','title':'它是个逗比',"img":"img/img4.png"}
				]
				
			}]);
			
		</script>	
	</body>
</html>

tabqh1.html

<div id="{{grId}}">
	<a  href="javascript:;" ng-repeat="attr in grData" ng-class="{first:$first}">{{attr.val}}</a>
	<div ng-repeat="attr in grData" ng-style="{display:$first?'block':'none'}">
		<img ng-src="{{attr.img}}"/> 
		<p>{{attr.title}}</p>
	</div>
</div>