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

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. 23.3Sum（三数和为零）

    Level:   Medium 题目描述: Given an array nums of n integers, are there elements a, b, c in nums such tha ...

  2. os模块与 sys模块

    os模块是与操作系统交互的一个接口 ''' os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作 ...

  3. MySQL 小抄

    1. 登录 mysql - u root -pEnter Password: 2. 查询端口 mysql> show global variables like "port" ...

  4. C语言两种方式实现矩阵的转置

    #include"stdio.h" typedef struct{ int i,j; int v; }Triple; typedef struct{ Triple date[]; ...

  5. nginx 配置优化指令

    worker_processes worker_processes指令是用来设计Nginx进程数,官方默认设为1,赋值太多了,将会对系统IO影响效率,降低Nginx服务器性能.但是为了让多核CPU能够 ...

  6. Linux私房菜阅读笔记

    在线man:http://www.linux.com/linux-man-pages 计算机硬件五大单元: 1.输入 2.输出 3.控制单元 4.算数逻辑单元 5.内存   CPU种类 1.RISC( ...

  7. (转)source、sh、bash、./执行脚本的区别

    source.sh.bash../执行脚本的区别  原文:https://www.cnblogs.com/sparkbj/p/5976100.html 1.source命令用法: source Fil ...

  8. jquery 属性选择器

    jquery 属性选择器   第一种根据属性选择E[attr] $("[title]").click().......... 即选择所有元素内 属性带有title的元素即<l ...

  9. 修改OPENSUSE 桌面快速搜索快捷键

  10. lua "诡异"的return用法

    https://yq.aliyun.com/articles/11387 lua "诡异"的return用法   德哥 2016-03-29 15:38:42 浏览5690 评论0 ...