1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>tab栏</title>
  6.     <style>
  7.         .active {
  8.             background-color: orange;
  9.         }
  10.     </style>
  11.     <script src="node_modules/angular/angular.js"></script>
  12. </head>
  13. <body ng-app="s1.app">
  14. <div>
  15.     <button ng-class="{ 'active' : data.current == 1 }" ng-click="actions.setCurrent(1)">张三</button>
  16.     <button ng-class="{ 'active' : data.current == 2 }" ng-click="actions.setCurrent(2)">李四</button>
  17.     <button ng-class="{ 'active' : data.current == 3 }" ng-click="actions.setCurrent(3)">王五</button>
  18. </div>
  19. <div>
  20.     <div ng-if="data.current == 1">张三的个人信息</div>
  21.     <div ng-if="data.current == 2">李四的个人信息</div>
  22.     <div ng-if="data.current == 3">王五的个人信息</div>
  23.     <script>
  24.         var app = angular.module('s1.app', []);
  25.         app.run(function ($rootScope) {
  26.             $rootScope.data = {
  27.                 current: "1" // 1代表张三，2代表李四，3代表王五
  28.             };
  29.             $rootScope.actions =
  30.             {
  31.                 setCurrent: function (param) {
  32.                     $rootScope.data.current = param;
  33.                 }
  34.             }
  35.         })
  36.     </script>
  37. </div>
  38. </body>
  39. </html>

angular实现的tab栏切换的更多相关文章

  1. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  2. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  3. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  4. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  5. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  6. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  7. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

  8. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

  9. [javascript]switchTab:仿腾讯首页Tab栏切换js插件

    腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...

随机推荐

  1. 复习MySQL③导入数据、检查及修改

    导入数据: 用insert into语句为表插入数据: - insert into 表名(字段1,字段2,…) values …… 导入外部文本文件: - 导入外部txt文件(导入CSV文件分隔符为' ...

  2. unittest的case和报告生成方法

    #coding=utf-8from appium import webdriverimport unittestimport HTMLTestRunnerclass CaseTest(unittest ...

  3. GDB调试工具、动态加载、内存管理（day04）

    一.程序中的错误处理 在系统中定义了一个全局变量errno.在这个全局变量中存放着系统调用或者库函数出错的信息(错误编号).然后根据错误编号获取错误信息. 举例说明: 打开一个文件,如果这个文件不存在 ...

  4. 多层下firebird自增长字段的处理

    使用unidac可以解决自增长字段处理的问题. 对于多层就是一个比较烦人的事情,解决办法:cliendataset中自增长字段的处理:id:自增长字段.在client中的处理方法:clientdata ...

  5. LaTeX的简单使用方法

    先来一个总结得比较好的https://blog.csdn.net/garfielder007/article/details/51646604 1.普通公式 $公式不换行$ $公式不换行$ $$公式独 ...

  6. WordPress 在Ubuntu下安装插件、主题输入FTP及无法创建目录的问题

    1.安装新主题.插件需要输入FTP的账户密码 如果不想输入的话可以使用在wp-config.php文件中添加脚本方式. define("FS_METHOD","direc ...

  7. “System.Runtime.InteropServices.COMException”类型的第一次机会异常在 ESRI.ArcGIS.Version.dll 中发生

    “System.Runtime.InteropServices.COMException”类型的第一次机会异常在 ESRI.ArcGIS.Version.dll 中发生 其他信息: The speci ...

  8. Java经典线程同步问题------生产者与消费者

    先上代码 class Test { public static void main(String []args) { Queue q=new Queue(); Producer p=new Produ ...

  9. 【cl】子查询应用场景

    有推荐人/没有推荐人的 recommender_id is null / is not null 谁是推荐人=他的id是别人的recommender_id=某个人的recommender_id是他的i ...

  10. ArcGIS教程：加权总和

    摘要 通过将栅格各自乘以指定的权重并合计在一起来叠加多个栅格. 插图 插图中,像元值与其权重因子相乘.两者所得结果相加创建输出栅格.以左上角像元为例.两个输入的值变为 (2.2 * 0.75) = 1 ...