首页 > 代码库 > Angular选项卡

Angular选项卡

2024-10-10 01:21:39   212人阅读

前几天我发的东西,可能对于没有基础的人很难理解,那么今天,咱们就发点简单点的东西吧!

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                 width: 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                 width: 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="http://www.mamicode.com/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>

就是这么简单!你们看懂了吗???

Angular选项卡


联系
我们