基本介绍

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切换案例的更多相关文章

  1. tab切换案例

    做个简单的tab切换效果,分别于jquery和js操作 (1)jQuery操作 先看下效果: <!DOCTYPE html> <html lang="en"> ...

  2. JS---DOM---tab切换案例实现---排他

    tab切换案例实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  3. WPF案例（－）模拟Windows7 Win+Tab切换

    原文:WPF案例(-)模拟Windows7 Win+Tab切换 一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...

  4. Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...

  5. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  6. Js 实现tab切换效果

    今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

  7. bootstrap tab切换如何让鼠标移动自动切换内容

    bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...

  8. 原生JS实现tab切换--web前端开发

    tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...

  9. echarts tab 切换问题整理

    一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...

随机推荐

  1. 【Chrome】Chrome浏览器怎么查看版本信息

    第一步,打开Chrome浏览器 第二步,弹出浏览器主界面 第三步,点击右上按钮(三横杠) 第四步,下拉中选择“关于” 第五步,弹出窗口,可以看到版本信息 第二种方法: 第六步,也可以通过地址栏里输入命 ...

  2. A+B Problem IV

    描述acmj最近发现在使用计算器计算高精度的大数加法时很不方便,于是他想着能不能写个程序把这个问题给解决了.   输入 包含多组测试数据每组数据包含两个正数A,B(可能为小数且位数不大于400) 输出 ...

  3. Springmvc 一个简单的管理系统 我所遇到的坑1（持续更新）

    前言 好久没有用springmvc写项目了,抽时间写一个简单的springmvc项目 是什么(what)为什么(why)怎么做(how) 1.读书破万卷下笔如有神(理清思路,知识储备和前期整理) 2. ...

  4. NIO基础学习——缓冲区

    NIO是对I/O处理的进一步抽象,包含了I/O的基础概念.我是基于网上博友的博客和Ron Hitchens写的<JAVA NIO>来学习的. NIO的三大核心内容:缓冲区,通道,选择器. ...

  5. YAML/Properties配置文件与Spring Boot（转）

    多年来,Java开发人员依赖于属性文件或xml文件来指定应用程序配置.在企业应用程序中,人们可以为每个环境(如开发,分段和生产)创建单独的文件,以定义相应环境的属性.但是,通过Spring引导,我们可 ...

  6. SecureCRT 8.0公布

    百度搜索到的7.3 注冊码生成器还是能够用于8.0的破解. 破解时,选择手动输入(Enter Licence Manually)产生的代码. 添加了一些特性,我最看重的是: 1.  能够在以下命令窗体 ...

  7. SpriteBuilder&amp;Cocos2D使用CCEffect特效实现天黑天亮过度效果

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;) 在动作或RPG类游戏中我们有时须要天黑和天亮过度的效果来完毕场 ...

  8. android混合动画实现

    在android开发,我们会常常使用到动画,可是简单的一种动画(如旋转.缩放.渐变.位移等)有时候并不能满足我们项目的要求,这时候就须要运用到混合动画.那么在安卓中是怎样实现一个炫酷的混合动画,以下是 ...

  9. 【网易云音乐 for linux】 踩过的坑

    1.从官网下载的包,却怎么也安装不上. 提示依赖,网上全是什么 sudo apt-get -f install ,结果提示有没有完成安装的包,让我卸载. 于是按下Y卸载了网易云. 尝试一个个修复以来, ...

  10. bzoj 4003 [JLOI2015]城池攻占 —— 左偏树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4003 其实蛮简单的,首先一个城市只会被其子树中的骑士经过,启发我们 dfs 序用可并堆合并子 ...