angular js tab換膚
阿新 • • 發佈：2018-12-04
使用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>