前几天我发的东西,可能对于没有基础的人很难理解,那么今天,咱们就发点简单点的东西吧!
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="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>就是这么简单!你们看懂了吗???
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
