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 连接数据库如何操作数据库中的数据
Nov 23 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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 高手之路(二)
2006/10/09 PHP
php模板中出现空行解决方法
2011/03/08 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
《春晓》教学反思
2014/04/20 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
Python基础详解之描述符
2021/04/28 Python
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
nginx容器方式反向代理实战
2022/04/18 Servers