AngularJS实现tab选项卡的方法详解


Posted in Javascript onJuly 05, 2017

本文实例讲述了AngularJS实现tab选项卡的方法。分享给大家供大家参考,具体如下:

一、代码实现

<!DOCTYPE html>
<html ng-app='app'>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      *{
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .TabNav{
        height: 131px;
        width: 450px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
      }
      .TabNav ul li{
        float: left;
        background: -webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
        border: 1px solid #ccc;
        padding: 5px 0;
        width: 100px;
        text-align: center;
        margin-left: -1px;
        position: relative;
        cursor: pointer;
      }
      .TabCon{
        position: absolute;
        left: -1px;
        top: 30px;
        border: 1px solid #ccc;
        border-top: none;
        width: 403px;
        height: 100px;
      }
      .TabNav ul li.active{
        background: #FFFFFF;
        border-bottom: none;
      }
    </style>
    <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="TabNav">
      <ul ng-init='activeTab=1'>
        <li ng-class='{active:activeTab==1}' ng-click='activeTab=1'>许嵩</li>
        <li ng-class='{active:activeTab==2}' ng-click='activeTab=2'>周杰伦</li>
        <li ng-class='{active:activeTab==3}' ng-click='activeTab=3'>林俊杰</li>
        <li ng-class='{active:activeTab==4}' ng-click='activeTab=4'>陈奕迅</li>
      </ul>
      <div class="TabCon">
        <div ng-show='activeTab==1'>断桥残雪、千百度、幻听、想象之中</div>
        <div ng-show='activeTab==2'>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
        <div ng-show='activeTab==3'>被风吹过的夏天、江南、一千年以后</div>
        <div ng-show='activeTab==4'>十年、K歌之王、浮夸</div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    var app=angular.module('app',[]);
    app.controller('tabcontroller',function($scope){
      var vm=$scope.vm;
    });
  </script>
</html>

二、效果预览

AngularJS实现tab选项卡的方法详解

三、实现原理

选项卡的内容是显示还是隐藏是由activeTab的值决定的,而这个值是通过选项卡上面的ng-click指令设置的,当对应选项卡的内容显示的时候,给点击的按钮添加样式,这样做虽然也能实现选项卡的内容,但是这样做的的弊端是,选项卡的内容是固定的,不好去改变,所以接下来我们将上面的代码改成下面这种形式

四、改版

<!DOCTYPE html>
<html ng-app='app'>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      *{
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .TabNav{
        height: 131px;
        position: relative;
        margin-left: 100px;
        margin-top: 100px;
      }
      .TabNav ul li{
        float: left;
        background: -webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
        border: 1px solid #ccc;
        padding: 5px 0;
        width: 100px;
        text-align: center;
        margin-left: -1px;
        position: relative;
        cursor: pointer;
      }
      .TabCon{
        position: absolute;
        left: -1px;
        top: 30px;
        border: 1px solid #ccc;
        border-top: none;
        width: 403px;
        height: 100px;
      }
      .TabNav ul li.active{
        background: #FFFFFF;
        border-bottom: none;
      }
    </style>
    <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="TabNav" ng-controller='tabcontroller'>
      <ul ng-init='selected=0'>
        <li ng-class='{active:selected==$index}' ng-click='show($index)' ng-repeat='item in vm'>{{item.list}}</li>
      </ul>
      <div class="TabCon">
        <div ng-show='selected==$index' ng-repeat='item in vm'>{{item.con}}</div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    var app=angular.module('app',[]);
    app.controller('tabcontroller',function($scope){
      $scope.vm=[
        {"list":"许嵩","con":"断桥残雪、千百度、幻听、想象之中"},
        {"list":"周杰伦","con":"红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话"},
        {"list":"林俊杰","con":"被风吹过的夏天、江南、一千年以后"},
        {"list":"陈奕迅","con":"十年、K歌之王、浮夸"}
      ];
      var selected=$scope.selected;
      $scope.show=function(index){
        $scope.selected=index;
      };
    });
  </script>
</html>

说明:vm这个数组里面是我们自己定义的一些假数据(这个数据实际上是可以从后台获取的),然后我们通过ng-repeat指令循环遍历出vm里面的数据,插入到页面中,$index是每个内容对象的索引值

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

Javascript 相关文章推荐
jquery放大镜效果超漂亮噢
Nov 15 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 #Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 #jQuery
jQuery常见面试题之DOM操作详析
Jul 05 #jQuery
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 #Javascript
微信小程序学习之数据处理详解
Jul 05 #Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 #Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 #Javascript
You might like
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
js 表格隔行颜色
2009/12/02 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python 伯努利分布详解
2020/02/25 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
新闻发布会主持词
2014/03/28 职场文书
党员干部一句话承诺
2014/05/30 职场文书
工作证明英文模板
2014/10/21 职场文书
商务邀请函
2015/01/30 职场文书
房屋维修申请报告
2015/05/18 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS