前几天我发的东西,可能对于没有基础的人很难理解,那么今天,咱们就发点简单点的东西吧!
Angular显示隐藏,选项卡!
还是那句话,话不多说,上代码:
1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 text-decoration: none; 11 } 12 #Box{ 13 display: block; 14 border: 1px solid black; 15 50%; 16 height: 400px; 17 margin: 100px auto; 18 } 19 nav{ 20 display: flex; 21 background: #BFBFBF; 22 23 } 24 nav a{ 25 display: flex; 26 justify-content: space-around; 27 33.3%; 28 height: 40px; 29 line-height: 40px; 30 color: black; 31 } 32 .active{ 33 background-color: red; 34 color: white; 35 } 36 .page{ 37 font-size: 3rem; 38 margin: 150px 40%; 39 } 40 </style> 41 42 //别忘了引入Angular的插件哦! 43 <script type="text/javascript" src="js/angular.min.js"></script> 44 </head> 45 <body ng-controller="test"> 46 <div id="Box"> 47 <nav> 48 <a ng-class="{'active':tabIndex==0}" href="javascript:;" ng-click="tab(0)">tab1</a> 49 <a ng-class="{'active':tabIndex==1}" href="javascript:;" ng-click="tab(1)">tab2</a> 50 <a ng-class="{'active':tabIndex==2}" href="javascript:;" ng-click="tab(2)">tab3</a> 51 </nav> 52 <div class="pages"> 53 <div class="page" ng-show="tabIndex==0">tab1</div> 54 <div class="page" ng-show="tabIndex==1">tab2</div> 55 <div class="page" ng-show="tabIndex==2">tab3</div> 56 </div> 57 </div> 58 <script> 59 var app = angular.module('myApp',[]); 60 app.controller('test',function($scope){ 61 //定义要聚焦的索引 62 $scope.tabIndex=0; 63 //更改要聚焦的tab 64 $scope.tab=function(index){ 65 $scope.tabIndex=index; 66 } 67 }); 68 </script> 69 </body> 70 </html>
就是这么简单!你们看懂了吗???