选项卡一：
javascript+html+css
<!doctype html> <html> <head> <meta charset="utf-8"> <title> js标签页tab切换</title> <style> #p1 .active{ background:blue; } #p1 p{ width:200px; height:200px; background:gray; border:1px solid black; display:none; } </style> <script> window.onload=function (){ var op=document.getelementbyid('p1'); var abtn=op.getelementsbytagname('input'); var ap=op.getelementsbytagname('p'); for(var i=0;i<abtn.length;i++){ //遍历p1中的按钮 abtn[i].index=i; //给abth[]添加自定义属性 abtn[i].onclick=function (){ for(var i=0;i<abtn.length;i++){ //遍历按钮，将class清除 abtn[i].classname=''; ap[i].style.display='none'; } this.classname='active'; ap[this.index].style.display='block'; } } } </script> </head> <body> <p id="p1"> <input class="active" type="button" value="选项1" /> <input type="button" value="选项2" /> <input type="button" value="选项3" /> <input type="button" value="选项4" /> <p style="display:block;">111</p> <p>222</p> <p>333</p> <p>444</p> </p> </body> </html>
选项卡二：
angularjs指令：
ng-class、ng-click、ng-if
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>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"> <p> <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> </p> <p> <p ng-if="data.current == 1">张三的个人信息</p> <p ng-if="data.current == 2">李四的个人信息</p> <p ng-if="data.current == 3">王五的个人信息</p> <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> </p> </body> </html>
选项卡三：
angularjs 指令：
ng-class、ng-click、ng-show
<!doctype html> <html ng-app="myapp"> <head lang="en"> <meta charset="utf-8">
angularjs 指令
第二种和第三种方式来源于下面代码的改进，产生的效果都是一样的。
<!doctype html> <html ng-app="myapp"> <head lang="en"> <meta charset="utf-8"> <title>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}} <p class="panel" ng-show="tab===1"> <h1>我是1111111111111111111111</h1> </p> <p class="panel" ng-show="tab===2"> <h1>我是22222222222222222</h1> </p> <p class="panel" ng-if="tab===3"> <h1>我是3333333333333333333333</h1> </p> </section> <script> var app = angular.module(myapp, []); app.controller(myctrl, function () { }); </script> </body> </html>
但ng-show和ng-if是有区别的
第一点区别是，
ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，
ng-show 是初始时就创建了，用display:block 和 display:none 来控制显示和不显示。
第二点区别是，
ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。
这样会导致，在 ng-if 中用基本变量绑定 ng-model，并在外层 p 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。
<p>{{name}}</p> <p ng-if="true"> <input type="text" ng-model="name"> </p>
ng-show 不存在此问题，因为它不自带一级作用域。
避免这类问题出现的办法是，始终将页面中的元素绑定到对象的属性（data.x）而不是直接绑定到基本变量（x）上。angularjs中的作用域
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样处理mac内安装nmp淘宝镜像失败
如何操作koa2微信公众号开发之本地开发调试环境搭建
以上就是怎样使用angularjs实现标签页tab选项卡切换的详细内容。