首页 > 代码库 > angular版选项卡
angular版选项卡
<!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="http://www.mamicode.com/angular.js"></script>
</head>
<body ng-controller="tabone">
<div id="box1" >
<input type="button" ng-repeat="json in arr" value="http://www.mamicode.com/{{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>
angular版选项卡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。