tabswitch

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<!-- add styles -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- add javascripts -->
<!-- <script src="js/jquery-2.1.3.min.js"></script> 不需要 -->
<script src="js/angular.min.js"></script>
<!-- <script src="js/angular-animate.min.js"></script> 不需要 -->
<script src="js/angular-touch.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
    <div ng-controller="myController">
        <div class="type-tabs">
            <div ng-repeat="item in [1,2,3,4]" ng-click="changeIndex($index)">Tab{{item}}</div>
        </div>
        <div class="guid-bar">
            <div class="guid-bar-content" style="left:{{25*activeIndex}}%"></div>
        </div>
        <div class="tab-content" ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()">
            <div class="tab-content-inner" style="left:{{ -100*activeIndex}}%">
                <div class="tab-content-item" ng-repeat="item in [1,2,3,4]" >
                    <h1 ng-bind="'Tab' + item"></h1>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<!-- http://codepen.io/dayu/pen/dPggXZ/ -->

*{margin: 0; padding: 0; border: none; font-family:'Arial';}
.type-tabs{width: 100%; height: 40px;}
.type-tabs div{float: left; width: 25%; line-height: 40px; text-align: center; cursor:pointer; user-select:none; -webkit-user-select:none;}
.guid-bar{position: relative; margin-top: -3px;}
.guid-bar-content{width: 25%; height: 3px; background-color: #345; position: absolute; left: 50%; transition:all 400ms ease;}
.tab-content{width: 100%; height: 500px; background-color: #ccc; overflow: hidden;}
.tab-content-inner{width: 400%; position: relative; transition: all 400ms;}
.tab-content-item{width: 25%; float: left; text-align:center;}

var myApp = angular.module('myApp', ['ngTouch']); //'ngAnimate', 

myApp.controller('myController', function ($scope) {
    $scope.activeIndex=0;
    $scope.changeIndex=function(index){
        $scope.activeIndex=index;
    };
    $scope.swipeLeft=function(){
        $scope.activeIndex=++$scope.activeIndex;
        $scope.check();
    };
    $scope.swipeRight=function(){
        $scope.activeIndex=--$scope.activeIndex;
        $scope.check();
    };
    $scope.check=function(){
        if($scope.activeIndex>3){
            $scope.activeIndex=0;
        }
        if($scope.activeIndex<0){
            $scope.activeIndex=3;
        }
    }
});

相关阅读:
maven的安装教程
Spring 历史及设计理念
MySQL Connector / Python
LDAP & implementation
RESTful levels & HATEOAS
事务隔离级别
cookie 和 session
正则表达式验证器regex validator
hello2部分代码分析
filter

原文地址：https://www.cnblogs.com/brittany/p/4836043.html