10. tab切换案例的实现

• 鼠标移动上去，根据type的不同进行切换
• ng-switch 和 ng-swtich-when

<div ng-switch="type">
        <div ng-switch-when="html">![](image/01.png)</div>
        <div ng-switch-when="ios">![](image/02.png)</div>
        <div ng-switch-when="java">![](image/03.png)</div>
        <div ng-switch-when="ui">![](image/04.png)</div>
    </div>

• 根据鼠标移动上去触发的事件对type进行绑定

 var app = angular.module('app',[]);
    app.controller('wmxController',['$scope',function ($scope) {
        //默认显示第一张
        $scope.type = "html";
        $scope.enter = function (args) {
            $scope.type = args;
        }
    }])

• 鼠标移动上去，样式发生改变

 <div class="title">
        <ul>
            <li ng-mouseenter="enter('html')" ng-class="{cur:type == 'html'}">前端学院</li>
            <li ng-mouseenter="enter('ios')"  ng-class="{cur:type == 'ios'}">ios学院</li>
            <li ng-mouseenter="enter('java')" ng-class="{cur:type == 'java'}">java学院</li>
            <li ng-mouseenter="enter('ui')"  ng-class="{cur:type == 'ui'}">UI精品学院</li>
        </ul>
    </div>