<!DOCTYPE html> | |
<html lang="en" ng-app="tab"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Tab by stupid way</title> | |
<style> | |
.wrap { | |
width: 500px; | |
margin: 0 auto; | |
} | |
.btn-group { | |
width: 100%; | |
height: 50px; | |
line-height: 50px; | |
text-align: center; | |
} | |
.active { | |
background: #EA3485; | |
color: #fff; | |
} | |
.content { | |
width: 100%; | |
height: 300px; | |
line-height: 300px; | |
text-align: center; | |
background: #2BC1E0; | |
font-size: 36px; | |
color: #f1f1f1; | |
} | |
</style> | |
<script src="angular/angular.min.js"></script> | |
<script> | |
var app = angular.module('tab', []); | |
app.controller('ctr1', function($scope) { | |
$scope.now = 0; | |
$scope.arr = [{ | |
name: 'Tab1', | |
content: 'First tab content' | |
}, | |
{ | |
name: 'Tab2', | |
content: 'Second tab content' | |
}, | |
{ | |
name: 'Tab3', | |
content: 'Third tab content' | |
}, | |
]; | |
$scope.fn = function(n) { | |
$scope.now = n; | |
} | |
}) | |
</script> | |
</head> | |
<body> | |
<div id="app" class="wrap" ng-controller="ctr1"> | |
<div class="btn-group"> | |
<input type="button" ng-repeat="json in arr" value="{{json.name}}" class="{{now==$index?'active':''}}" ng-click="fn($index)"> | |
</div> | |
<div class="content" ng-repeat="json in arr" ng-show="now==$index">{{json.content}}</div> | |
</div> | |
</body> | |
</html> |
angular_tab
最新推荐文章于 2023-03-22 16:10:25 发布