基本介绍
angular框架下的tab切换，相比较于之前的纯js写的代码，有一个很大的特点就是以数据为驱动，基本上不用搜索dom元素就可以实现效果
基本使用
（1）导航部分使用的是的状态使用的是ng-class，只有当参数是true时，才会显示current这个类，每个li标签也绑定了一个事件可以控制type的取值
（2）主体部分使用的ng-switch，当type值发生改变才会显示对应的li标签
<!DOCTYPE html > <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .clearfix:after { content: ''; visibility: hidden; display: block; clear: both; } div { margin: 120px auto; width: 400px; } .tab { list-style: none; background-color: pink; } .tab li { float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; font-size: 14px; position: relative; } .tab li:after { content: ''; position: absolute; height: 20px; border-right: 1px solid black; top: 5px; right: 0px; } .tab li:last-child:after { visibility: hidden; } .tab li.current { background-color: #ccc; } .main { list-style: none; height: 398px; border: 1px solid #000; } .main li { width: 400px; height: 300px; line-height: 300px; text-align: center; font-size: 34px; position: relative; /*display: none;*/ } /*.main li.current {*/ /*display: block;*/ /*}*/ </style> <script src="../libs/angular.min.js"></script> </head> <body> <div ng-controller="DemoController"> <ul class="tab clearfix"> <li ng-click="switch(1)" ng-class="{current:type==1}">1</li> <li ng-click="switch(2)" ng-class="{current:type==2}">2</li> <li ng-click="switch(3)" ng-class="{current:type==3}">3</li> <li ng-click="switch(4)" ng-class="{current:type==4}">4</li> </ul> <ul class="main" ng-switch="type"> <li ng-switch-when="1">1</li> <li ng-switch-when="2">2</li> <li ng-switch-when="3">3</li> <li ng-switch-when="4">4</li> </ul> </div> <script> var App = angular.module('App', []); App.controller('DemoController', ['$scope', function ($scope) { $scope.type = '1'; $scope.switch = function (value) { $scope.type = value; } }]); </script> </body> </html>
