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 相关文章推荐
js二维数组排序的简单示例代码
Jan 24 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
解决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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
深入解析php之apc
2013/05/15 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
公务员政审个人鉴定
2014/02/25 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
MySQL约束超详解
2021/09/04 MySQL
Kubernetes控制节点的部署
2022/04/01 Servers
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸