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

Angular显示隐藏,选项卡!

还是那句话,话不多说,上代码:

 <!DOCTYPE html>

 <html ng-app="myApp">

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             *{

                 margin: 0;

                 padding: 0;

                 text-decoration: none;

             }

             #Box{

                 display: block;

                 border: 1px solid black;

                 width: 50%;

                 height: 400px;

                 margin: 100px auto;

             }

             nav{

                 display: flex;

                 background: #BFBFBF;

             }

             nav a{

                 display: flex;

                 justify-content: space-around;

                 width: 33.3%;

                 height: 40px;

                 line-height: 40px;

                 color: black;

             }

             .active{

                 background-color: red;

                 color: white;

             }

             .page{

                 font-size: 3rem;

                 margin: 150px 40%;

             }

         </style>

         //别忘了引入Angular的插件哦!

         <script type="text/javascript" src="js/angular.min.js"></script>

     </head>

     <body  ng-controller="test">

         <div id="Box">

             <nav>

                    <a ng-class="{'active':tabIndex==0}" href="javascript:;" ng-click="tab(0)">tab1</a>

                    <a ng-class="{'active':tabIndex==1}" href="javascript:;" ng-click="tab(1)">tab2</a>

                    <a ng-class="{'active':tabIndex==2}" href="javascript:;" ng-click="tab(2)">tab3</a>

             </nav>

             <div class="pages">

                 <div class="page" ng-show="tabIndex==0">tab1</div>

                 <div class="page" ng-show="tabIndex==1">tab2</div>

                 <div class="page" ng-show="tabIndex==2">tab3</div>

             </div>

         </div>

         <script>

           var app = angular.module('myApp',[]);

           app.controller('test',function($scope){

                   //定义要聚焦的索引

                 $scope.tabIndex=0;

                 //更改要聚焦的tab

                 $scope.tab=function(index){

                     $scope.tabIndex=index;

                }

           });

         </script>

     </body>

 </html>

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

Angular选项卡的更多相关文章

  1. angular的跨域（angular百度下拉提示模拟）和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  2. Angular 选项卡

    <div ng-init="now=0;" class="nav"> <h4>选项卡</h4> <div > & ...

  3. （笔记）angular选项卡变色

  4. angular实践第一弹：选项卡开发

    在学习angular的过程中,实践是最好的方法. 在开发选项卡的过程中,不需要再像jquery一样以DOM操作为核心,那什么样的情况是以DOM操作为核心的Jquery的思想呢? 一想到改变什么,就想设 ...

  5. 用angular制作简单的选项卡

    现在angular变得挺火热的,自己也去简单的学习了一下,学了几天下来觉得angular果然好用,但是现在只是停留在比较浅的层面上,要想学好angular还是得下一番功夫的.学了一点新知识就想和大家分 ...

  6. 用angular中的ng-repeat和ng-show来实现tab选项卡

    虽然我们可以用angular中的路由来做tab选项卡,但是那会让我们建立很多的页面来引入,或者建立 <script type="text/ng-template" id=&q ...

  7. Angular页面选项卡切换要注意的toggleClass

    在第一,第二篇随笔中写到的选项卡切换,我回头看了看发现缺少了一个很重要的部分,那就是toggleClass. //在js控制器中必须写明指令,要不然在页面写了toggle-class="ac ...

  8. （笔记）angular 单选选项卡

  9. （笔记）angular material 选项卡用法

随机推荐

  1. 0.jQuery选择器

    左边的是jQuery用法 右边是js用法 $("tag") == document.getElementsByTagName("tag"); $(". ...

  2. tornado 07 数据库—ORM—SQLAlchemy—查询

    tornado 07 数据库—ORM—SQLAlchemy—查询 引言 #上节课使用query从数据库查询到了结果,但是query返回的对象是直接可用的吗 #在query.py内输入一下内容 from ...

  3. C++_IO与文件1-输入与输出概述

    为了方便起步先从istream类对象cin和ostream类对象cout开始,了解输入和输出的基本方法: 同时使用ifstream和ofstream对象进行文件的输入和输出: 然后详细学习cin和co ...

  4. Feel Good(两遍单调栈维护区间+前缀和）

    Bill is developing a new mathematical theory for human emotions. His recent investigations are dedic ...

  5. HDU - 1285-确定比赛名次（拓扑排序+优先队列）

    有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排名,但现在裁判委员会不能直接获得每个队的比赛成绩,只知道 ...

  6. vue2.0小小记录

    1.关于路由跳转方法:push this.$router.push({name:'master',params:{id:'参数'}}); //name和params搭配,刷新的话,参数会消失 this ...

  7. 112th LeetCode Weekly Contest Validate Stack Sequences

    Given two sequences pushed and popped with distinct values, return true if and only if this could ha ...

  8. Codeforces - 527C 平衡树维护几何

    题意:给定一个矩形\(W*H\),一共\(n\)次切割操作(水平/垂直),求每次操作后得出的最大面积 随机按tag扫CF题目找到的题,可以分别用平衡树维护割边的位置和长度(\(x/y\)各两个) 具体 ...

  9. java8 方法引用与lambda

    List<String> list = new ArrayList<>(); //list.stream().filter((String s)->System.out. ...

  10. 1144 The Missing Number （20 分）

    Given N integers, you are supposed to find the smallest positive integer that is NOT in the given li ...