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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 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
php 多关键字 高亮显示实现代码
2012/04/23 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
php检测url是否存在的方法
2015/04/14 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Python中的全局变量如何理解
2020/06/04 Python
python中wheel的用法整理
2020/06/15 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
通信生自我鉴定
2014/01/18 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
python turtle绘图
2022/05/04 Python
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js