angular js tab换肤

最新推荐文章于 2021-01-07 16:02:35 发布

Servenity

最新推荐文章于 2021-01-07 16:02:35 发布

阅读量350

点赞数

分类专栏： Angular 文章标签： angular javascript

本文链接：https://blog.csdn.net/Servenity/article/details/78844639

版权

Angular 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

使用angular实现简单的网页换肤

<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		.clearfix:after {
			content: "\200B";
			display: block;
			height: 0;
			clear: both;
		}
		
		li {
			list-style: none;
			border: 1px solid #ccc;
			border-radius: 10px;
			background-color: #ccc;
			width: 100px;
			padding: 5px 10px;
			float: left;
			text-align: center;
		}
		
		.a {
			background: url(1.jpg) no-repeat;
			width: 100%;
			height: 400px;
		}
		
		.b {
			background: url(2.jpg) no-repeat;
			width: 100%;
			height: 400px;
		}
		
		.c {
			background: url(3.jpg) no-repeat;
			width: 100%;
			height: 400px;
		}
	</style>
</head>

<body ng-app='app'>
	<div class="TabNav">
		<ul ng-init='activeTab=1' class="clearfix">
			<li ng-class='{active:activeTab==1}' ng-click='activeTab=1'>皮肤one</li>
			<li ng-class='{active:activeTab==2}' ng-click='activeTab=2'>皮肤two</li>
			<li ng-class='{active:activeTab==3}' ng-click='activeTab=3'>皮肤three</li>
		</ul>
		<div class="TabCon">
			<div ng-show='activeTab==1' class="a"></div>
			<div ng-show='activeTab==2' class="b"></div>
			<div ng-show='activeTab==3' class="c"></div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var app = angular.module('app', []);
	app.controller('tabcontroller', function($scope) {});
</script>

</html>