版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Servenity/article/details/78844639
使用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>