AngularJS标签页tab选项卡切换功能经典实例详解


Posted in Javascript onMay 16, 2018

本文实例讲述了AngularJS实现标签页tab选项卡功能。分享给大家供大家参考,具体如下:

选项卡一:

JavaScript+html+css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3water.com js标签页tab切换</title>
    <style>
      #div1 .active{
        background:blue;
      }
      #div1 div{
        width:200px;
        height:200px;
        background:gray;
        border:1px solid black;
        display:none;
      }
    </style>
    <script>
      window.onload=function (){
        var oDiv=document.getElementById('div1');
        var aBtn=oDiv.getElementsByTagName('input');
        var aDiv=oDiv.getElementsByTagName('div');
        for(var i=0;i<aBtn.length;i++){     //遍历div1中的按钮
          aBtn[i].index=i;      //给aBth[]添加自定义属性
          aBtn[i].onclick=function (){
            for(var i=0;i<aBtn.length;i++){ //遍历按钮,将class清除
              aBtn[i].className='';
              aDiv[i].style.display='none';
            }
            this.className='active';
            aDiv[this.index].style.display='block';
          }
        }
      }
    </script>
  </head>
  <body>
    <div id="div1">
      <input class="active" type="button" value="选项1" />
      <input type="button" value="选项2" />
      <input type="button" value="选项3" />
      <input type="button" value="选项4" />
      <div style="display:block;">111</div>
      <div>222</div>
      <div>333</div>
      <div>444</div>
    </div>
  </body>
</html>

运行效果(直接在http://tools.3water.com/code/HtmlJsRun上测试运行):

AngularJS标签页tab选项卡切换功能经典实例详解

选项卡二:

angularjs指令:

ng-class、ng-click、ng-if

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com AngularJS标签页tab切换</title>
  <style>
    .active {
      background-color: orange;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="s1.app">
<div>
  <button ng-class="{ 'active' : data.current == 1 }" ng-click="actions.setCurrent(1)">张三</button>
  <button ng-class="{ 'active' : data.current == 2 }" ng-click="actions.setCurrent(2)">李四</button>
  <button ng-class="{ 'active' : data.current == 3 }" ng-click="actions.setCurrent(3)">王五</button>
</div>
<div>
  <div ng-if="data.current == 1">张三的个人信息</div>
  <div ng-if="data.current == 2">李四的个人信息</div>
  <div ng-if="data.current == 3">王五的个人信息</div>
  <script>
    var app = angular.module('s1.app', []);
    app.run(function ($rootScope) {
      $rootScope.data = {
        current: "1" // 1代表张三,2代表李四,3代表王五
      };
      $rootScope.actions =
      {
        setCurrent: function (param) {
          $rootScope.data.current = param;
        }
      }
    })
  </script>
</div>
</body>
</html>

运行效果(直接在http://tools.3water.com/code/HtmlJsRun上测试运行):

AngularJS标签页tab选项卡切换功能经典实例详解

选项卡三:

angularjs 指令:

ng-class、ng-click、ng-show

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com AngularJS标签页tab切换</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<section ng-controller="myCtrl as panel">
  <ul>
    <li ng-class="{active:panel.isSelected(1)}">
      <a href ng-click="panel.selectTab(1)">1111111111</a>
    </li>
    <li ng-class="{active:panel.isSelected(2)}">
      <a href ng-click="panel.selectTab(2)">2222222222</a>
    </li>
    <li ng-class="{active:panel.isSelected(3)}">
      <a href ng-click="panel.selectTab(3)">33333333333</a>
    </li>
  </ul>
  <!--是否点击-->
  {{panel.isSelected(1)}}
  {{panel.isSelected(2)}}
  {{panel.isSelected(3)}}
  <div class="panel" ng-show="panel.isSelected(1)">
    <h1>我是1111111111111111111111</h1>
  </div>
  <div class="panel" ng-show="panel.isSelected(2)">
    <h1>我是22222222222222222</h1>
  </div>
  <div class="panel" ng-show="panel.isSelected(3)">
    <h1>我是3333333333333333333333</h1>
  </div>
</section>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function () {
    this.tab = 2;/*设置默认*/
    this.selectTab = function (setTab) {/*设置tab点击事件*/
      this.tab = setTab;
    };
    this.isSelected = function (checkedTab) {/*页面的切换*/
      return this.tab === checkedTab;
    }
  });
</script>
</body>
</html>

运行效果(直接在http://tools.3water.com/code/HtmlJsRun上测试运行):

AngularJS标签页tab选项卡切换功能经典实例详解

选项卡四:

angularjs 指令

第二种和第三种方式来源于下面代码的改进,产生的效果都是一样的。

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com AngularJS标签页tab切换</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<section ng-init="tab=3">
  <ul>
    <li ng-class="{active:tab===1}">
      <a href ng-click="tab=1">1111111111</a>
    </li>
    <li ng-class="{active:tab===2}">
      <a href ng-click="tab=2">2222222222</a>
    </li>
    <li ng-class="{active:tab===3}">
      <a href ng-click="tab=3">33333333333</a>
    </li>
  </ul>
  <!--是否点击-->
  {{tab===1}}
  {{tab===2}}
  {{tab===3}}
  <div class="panel" ng-show="tab===1">
    <h1>我是1111111111111111111111</h1>
  </div>
  <div class="panel" ng-show="tab===2">
    <h1>我是22222222222222222</h1>
  </div>
  <div class="panel" ng-if="tab===3">
    <h1>我是3333333333333333333333</h1>
  </div>
</section>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function () {
  });
</script>
</body>
</html>

运行效果(直接在http://tools.3water.com/code/HtmlJsRun上测试运行):

AngularJS标签页tab选项卡切换功能经典实例详解

但ng-show和ng-if是有区别的

第一点区别是,

ng-if 在后面表达式为 true 的时候才创建这个 dom 节点,
ng-show 是初始时就创建了,用display:blockdisplay:none 来控制显示和不显示。

第二点区别是,

ng-if 会(隐式地)产生新作用域,ng-switchng-include 等会动态创建一块界面的也是如此。

这样会导致,在 ng-if 中用基本变量绑定 ng-model,并在外层 div 中把此 model 绑定给另一个显示区域,内层改变时,外层不会同步改变,因为此时已经是两个变量了。

<p>{{name}}</p>
<div ng-if="true">
  <input type="text" ng-model="name">
</div>

ng-show 不存在此问题,因为它不自带一级作用域。

避免这类问题出现的办法是,始终将页面中的元素绑定到对象的属性(data.x)而不是直接绑定到基本变量(x)上。AngularJS中的作用域

参考:

优酷视频:AngularJS 入门教程(2.2):学做标签页

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
react-router中的属性详解
Jun 01 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
如何基于viewport vm适配移动端页面
Nov 13 Javascript
解决Mac node版本升级失败的问题
May 16 #Javascript
在Mac下彻底卸载node和npm的方法
May 16 #Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 #Javascript
AngularJS中的作用域实例分析
May 16 #Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 #Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 #Javascript
详解使用create-react-app快速构建React开发环境
May 16 #Javascript
You might like
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
表单验证的完整应用案例探讨
2013/03/29 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
Python 可视化神器Plotly详解
2020/12/26 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
预备党员党课思想汇报
2014/01/13 职场文书
2015年企业工作总结范文
2015/04/28 职场文书