您的位置：首页 > Web前端 > AngularJS

angularJS-实现选项卡功能

2017-09-06 20:59 435 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航