<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 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> <input type="button" value="选项1" /> <input type="button" value="选项2" /> <input type="button" value="选项3" /> <input type="button" value="选项4" /> <div>111</div> <div>222</div> <div>333</div> <div>444</div> </div> </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="https://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>
选项卡三：
angularjs 指令：
ng-class、ng-click、ng-show
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title> AngularJS标签页tab切换</title> <script src="https://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 ng-show="panel.isSelected(1)"> <h1>我是1111111111111111111111</h1> </div> <div ng-show="panel.isSelected(2)"> <h1>我是22222222222222222</h1> </div> <div 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>
选项卡四：
angularjs 指令
第二种和第三种方式来源于下面代码的改进，产生的效果都是一样的。