本文实例讲述了AngularJS实现标签页标签选项卡功能。分享给大家供大家参考，具体如下：

选项卡一：

JavaScript html css

！DOCTYPE html html head meta charset=' utf-8 ' titlewww.jb51.net js标签页标签切换/title style #div1 .活动{ background : blue } # div 1 div { width :200 px高度：200 px背景：灰色；border:1px纯黑；display:none} /style脚本窗户。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；var aBtn=odiv。getelementsbytagname(' input ')；var ADiv=Odiv。GetElementsBytagname(' div ')；for(var I=0；iaBtn.lengthi ){ //遍历div1中的按钮aBtn[i].索引=我；//给aBth[]添加自定义属性aBtn[i].onclick=function(){ for(var I=0；iaBtn.lengthi ){ //遍历按钮，将班级清除aBtn[i].className=ADiv[I]。风格。显示='无'；} this . NAmE=' activeADiv[this。索引]。风格。display=' block} } }/脚本/头体div id=' div 1 '输入类=' active '类型=' button '值='选项1' /输入类型='按钮'值='选项2' /输入类型='按钮'值='选项3' /输入类型='按钮'值='选项4 '/div style='显示：块；111/222/333/444/div/div/body/html运行效果（直接在http://tools.jb51.net/code/HtmlJsRun上测试运行):

选项卡二：

开发指令：

ng-class、ng-click、ng-if

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net AngularJS标签页标签切换/title样式。活动{背景-颜色：橙色；}/style脚本src=' http :http://apps。bdimg。com/libs/angular。js/1。4 .6/棱角分明。量滴js '/script/head dy ng-app=' S1。app ' div按钮ng-class=' { ' active ' :数据。current==1 }“ng-click=”操作。setcurrent(1)张三/button button ng-class=' { ' active ' :数据。current==2 }“ng-click=”操作。setcurrent(2)李四/button button ng-class=' { ' active ' :数据。current==3 }“ng-click=”操作。setcurrent(3)王五/button/div div ng-if=' data。电流==1 '张三的个人信息/div div ng-if='data.current==2 '李四的个人信息/div div ng-if='data.current==3 '王五的个人信息/div脚本var app=angular.module('s1.app '，[])；app。run(函数($ rootScope){ $ rootScope。数据={ current : ' 1 '/1代表张三，2代表李四，3代表王五};$根范围。actions={ set current 3360 function(param){ $ root scope。数据。电流=参数；} } })/脚本/div/正文/html运行效果（直接在http://tools.jb51.net/code/HtmlJsRun上测试运行):

选项卡三：

开发指令：

ng-class、ng-click、ng-show

！DOCTYPE html html ng-app=' myApp ' head lang=' en ' meta charset=' UTF-8 ' titlewww.jb51.net AngularJS标签页标签切换/title脚本src=' http :http://apps。bdimg。com/libs/angular。js/1。4 .6/棱角分明。量滴js '/脚本/头部解剖ng-controller=' myCtrl as panel ' ul Li ng-class=' { active : panel。被选中(1)} ' a href ng-click='面板。select tab(1)' 1111111111/a/Li ng-class=' { active 33333-是否点击-{ { panel。被选中(1)} } { { panel。被选中(2)} } { { panel。被选中(3)} } div class=' panel ' ng-show=' panel。被选中(1)“h1我是11111111111111111111111111111111/h1/div div class=' panel ' ng-show=' panel。被选中(2)“h1我是222222222222222222222/h1/div class=' panel ' ng-show=' panel。被选中(3)“h1我是33333333333333333333333333/h1/div/section脚本var app=angular。模块(' myApp '，[])；app.controller('myCtrl '，function(){ this。tab=2；/*设置默认*/this.selectTab=函数(setTab) {/*设置标签点击事件*/这个。tab=SetTab};这个。被选中=函数(CheckEdTab){/*页面的切换*/返回这个。tab===CheckEdTab} });/脚本/正文/html运行效果（直接在http://tools.jb51.net/code/HtmlJsRun上测试运行):

选项卡四：

开发指令

第二种和第三种方式来源于下面代码的改进，产生的效果都是一样的。

！DOCTYPE html html ng-app=' myApp ' head lang=' en ' meta charset=' UTF-8 ' titlewww.jb51.net AngularJS标签页标签切换/title脚本src=' http :http://apps。bdimg。com/libs/angular。js/1。4 .6/棱角分明。量滴js '/脚本/头部解剖ng-init=' tab=3 ' ul Li ng-class=' { active : tab===1 } ' a href-click=' tab=1 ' 111111111111/a/Li ng-class=' { active : tab====4-是否点击-{ { tab===1 } } { { tab===2 } } { { tab===3 } } div class=' panel ' ng-show=' tab===1 ' h1我是1111111111111111111111111111111111/h1/div class=' panel ' ng-show=' tab===2 ' h1我是22222222222222222222/h1/div class=' panel ' ng-if=' tab===3 ' h1我是33333333333333333333333333/h1/div/section脚本var app=angular。 模块(' myApp '，[])；app.controller('myCtrl '，function(){ })；/脚本/正文/html运行效果（直接在http://tools.jb51.net/code/HtmlJsRun上测试运行):

但尼日利亚显示和条件判断指令是有区别的

第一点区别是，

条件判断指令在后面表达式为真实的的时候才创建这个数字正射影像图节点吴秀是初始时就创建了，用显示：块和display:none来控制显示和不显示。

第二点区别是，

条件判断指令会（隐式地)产生新作用域，ng-开关、ng-包括等会动态创建一块界面的也是如此。

这样会导致，在条件判断指令中用基本变量绑定尼日利亚模型，并在外层差异中把此模型绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。

p{{name}}/pdiv ng-if='true '输入类型=' text ' ng-model=' name '/div ng-show不存在此问题，因为它不自带一级作用域。

避免这类问题出现的办法是，始终将页面中的元素绑定到对象的属性(data.x)而不是直接绑定到基本变量上AngularJS。中的作用域

参考：

AngularJS常见面试问题

优酷视频：AngularJS入门教程(2.2):学做标签页

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

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