Angular——tab切换案例

基本介绍

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>

巴特西

Angular——tab切换案例

最新文章

热门文章