angular_tab

最新推荐文章于 2023-03-22 16:10:25 发布

转载最新推荐文章于 2023-03-22 16:10:25 发布 · 551 阅读

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