HTML：
<!DOCTYPE html>
<html ng-app="tabApp">
<head>
<meta charset="UTF-8">
<title>tabs02</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="../css/tabs01.css" />
</head>
<body>
<div class="container" ng-controller="tabCtrl">
<ul ng-init='tab=0'>
<li ng-class='{active:tab==$index}' ng-click="show($index)" ng-repeat="x in arrays">{{x.title}}</li>
</ul>
<div class="Tabdiv">
<div ng-show="tab==$index" ng-repeat="x in arrays">{{x.word}}</div>
</div>
</div>
</body>
</html> JS：
<script>
var app = angular.module("tabApp",[]);
app.controller('tabCtrl',function($scope){
$scope.arrays = [
{"title":"湖人",
"word":"科比，奥尼尔、贾巴尔"
},{
"title":"热火",
"word":"韦德，波什"
},{
"title":"骑士",
"word":"詹姆斯，欧文"
},{
"title":"马刺",
"word":"邓肯、帕克、吉诺比利"
}];
$scope.show = function(index){
$scope.tab = index;
};
});
</script>CSS：
* {
list-style: none;
margin: 0;
padding: 0;
}
.container{
width: 500px;
height: 300px;
}
.Tabdiv{
width: 405px;
height: 200px;
background: #eee;
border: 1px solid black;
border-top: none;
}
ul li{
width: 100px;
height: 30px;
text-align: center;
display: block;
float: left;
background: #CCCCCC;
border: 1px solid #EDEDED;
cursor: pointer;
padding: 5px 0;
}
ul li.active{
background: #eee;
border-bottom: none;
}
图片：
