angularJS-实现选项卡功能

最新推荐文章于 2018-10-11 09:33:25 发布

艾斯德斯的博客

最新推荐文章于 2018-10-11 09:33:25 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_36898102/article/details/77871391

版权

angularJs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="myPro">
	<head>
		<meta charset="UTF-8">
		<title>angularJS-实现选项卡功能</title>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<style>
			*{padding: 0;margin: 0;}
			ul,ol{list-style: none;}
			ul li{width:50px;height: 30px;line-height: 30px; float: left;text-align: center;border: 1px solid #000000;cursor:pointer;}
			ul .active{background-color: #009ceb;}
			.box{width: 1000px;height: 600px;margin: 100px auto;border: 1px solid #000000;}
		</style>
	</head>
	<body ng-controller="myProController">
		<ul>
			<li ng-class="{'active':data.current==1}" ng-click="actions.setCurrent(1)">选项1</li>
			<li ng-class="{'active':data.current==2}" ng-click="actions.setCurrent(2)">选项2</li>
			<li ng-class="{'active':data.current==3}" ng-click="actions.setCurrent(3)">选项3</li>
		</ul>
		<div class="box">
			<div ng-if="data.current==1">这里是选项卡1</div>
			<div ng-if="data.current==2">这里是选项卡2</div>
			<div ng-if="data.current==3">这里是选项卡3</div>
		</div>
	</body>
	<script>
		var pro = angular.module("myPro",[]);
		pro.controller("myProController",["$scope","$rootScope",function($scope,$rootScope){
			//选项卡的切换
			$rootScope.data = {
				current:"1"
			};
			$rootScope.actions = {
				setCurrent:function(param){
					$rootScope.data.current = param;
				}
			};
		}]);
	</script>
</html>

艾斯德斯的博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularJS-实现选项卡功能

angularJS-实现选项卡功能 *{padding: 0;margin: 0;} ul,ol{list-style: none;} ul li{width:50px;height: 30px;line-height: 30px; float: left;text-align: center;border: 1px solid #000000;cursor:p
复制链接

扫一扫