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 相关文章推荐
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
Mac下安装vue
Apr 11 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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
第一节--面向对象编程
2006/11/16 PHP
php5中类的学习
2008/03/28 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
动态加载iframe
2006/06/16 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
jquery map方法使用示例
2014/04/23 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
详解AngularJS controller调用factory
2017/05/19 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
希特勒经典演讲稿
2014/05/19 职场文书
共青团员自我评价
2015/03/10 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python