zoukankan      html  css  js  c++  java
  • 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>

     

  • 相关阅读:
    Go 语言简介(下)— 特性
    Array.length vs Array.prototype.length
    【转】javascript Object使用Array的方法
    【转】大话程序猿眼里的高并发架构
    【转】The magic behind array length property
    【转】Build Your own Simplified AngularJS in 200 Lines of JavaScript
    【转】在 2016 年做 PHP 开发是一种什么样的体验?(一)
    【转】大话程序猿眼里的高并发
    php通过token验证表单重复提交
    windows 杀进程软件
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/8410533.html
Copyright © 2011-2022 走看看