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

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. 《Andrew Ng深度学习》笔记3

    浅层神经网络 初步了解了神经网络是如何构成的,输入+隐藏层+输出层.一般从输入层计算为层0,在真正计算神经网络的层数时不算输入层.隐藏层实际就是一些算法封装成的黑盒子.在对神经网络训练的时候,就是对神 ...

  2. ubuntu下的pycharm4中文路径乱码

    修改字体: 设置(settings)->外观与行为(appearance & behavior) -> 外观(appearance) ->我选择的主题是Darcula 但其字 ...

  3. IOS中NSUserDefaults的用法

    NSUserDefaults适合存储轻量级本地数据,比如要保存用户登陆的用户名.密码,使用NSUserDefaults是首选.下次再登陆的时候就可以直接从NSUserDefaults里面读取上次登陆的 ...

  4. 洛谷 P1579 哥德巴赫猜想（升级版）

    嗯... 这或许也算一道数论题吧... 题目链接:https://www.luogu.org/problemnew/show/P1579 这道题的说明好像只会扰乱人的思路....然后就是这道题的细节比 ...

  5. Laravel项目部署到Nginx服务器除了/目录,全飘404

    https://blog.csdn.net/yoywow/article/details/52153610 不管是Nginx还是Apache,如果不配置,都会出现404,不能路由. 我云服务器安装的是 ...

  6. wamp下localhost目录Your Projects下项目无法打开解决方案

    最近在学PHP,然后可能遇到各种小白问题,记录下来当做自己成长的见证吧: wamp下localhost目录Your Projects下项目无法打开,但是在url中输入项目可以访问到. 解决方案: 注意 ...

  7. 微信获取用户信息的两个接口和两个ACCESS_TOKEN

    有一段时间没有搞微信开发了 ,今天突然要改一下程序! 回头一看 微信的帮助文档太tm的稀烂的,太难懂了,这做个笔记以后看着方便 微信有2个ACCESS_TOKEN, 1,基础接口的token 获取接口 ...

  8. Spring Annotation（注解）

    Spring Boot Annotation @SpringBootApplication 必须作用在main 方法所在类 @RequestMapping @GetMapping @PostMappi ...

  9. flask综合整理1

    前言: 框架的对比 Django:1个重武器,包含了web开发中常用的功能.组件的框架:(ORM.Session.Form.Admin.分页.中间件.信号.缓存.ContenType....): To ...

  10. xshell SSH 连接出现 outgoing encryption ，或者no matching host key algorithm found错误的解决

    首先看看xshell的使用版本,如果是xshell 4,提示的信息为:no matching host key algorithm found 如果是xshell 5,提示的是: outgoing e ...