<!DOCTYPE html>
<html lang="en" ng-app="tab">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
list-style: none;
}
#box1{
width:500px;
height:500px;
border:1px solid red;
}
#box1 input{
background: yellow;
}
#box1 .active{
background: red;
}
#box1 div{
width:300px;
height:300px;
background: red;
font-size: 50px;
text-align: center;
line-height: 300px;
display: none;
}
#box1 .show{
display: block;
}
</style>
<script src="angular.js"></script>
</head>
<body ng-controller="tabone">
<div id="box1" >
<input type="button" ng-repeat="json in arr" value="{{json.name}}" class="{{num == $index?'active':''}}" ng-click="fn($index)">
<div ng-repeat="json in arr" class="{{num == $index?'show':''}}">{{json.content}}</div>
</div>
<script>
var app = angular.module('tab',[]);
app.controller('tabone',function ($scope) {
$scope.num = 0;
$scope.arr = [
{'name':'按钮1','content':'1'},
{'name':'按钮2','content':'2'},
{'name':'按钮3','content':'3'}
];
$scope.fn = function (n) {
$scope.num = n;
}
})
</script>
</body>
</html>
