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

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. python学习之路---day03

    一:数据类型转换 1:bool-->int 将bool转成 int型 True 是1 False是0 a=True c=int(a) print(c) b=False d=int(b) prin ...

  2. checkstyle 各标签 （有几个没翻译，不懂意思）

    以下是对checkstyle 7.8.1 version各标签的翻译,有少数几个标签没翻译,不太懂官网的意思,就空了,希望游客能帮忙补充补充,另外有错的话也希望大家留言下哈,另外转载的话请标明一下 1 ...

  3. JAVA数据结构--选择排序

    选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理如下.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然 ...

  4. 109th LeetCode Weekly Contest Number of Recent Calls

    Write a class RecentCounter to count recent requests. It has only one method: ping(int t), where t r ...

  5. 江西理工大学南昌校区排名赛 C: 单身狗的地图游戏

    题目描述 萌樱花是一只单身狗. 萌樱花今天决定去喜欢的学妹家玩,但他不记得路,于是他拿出有n个点的完全图,选取了k条不同的路. 完全图:n 个点的图中任意两个点之间都有一条边相连,所以有 n*(n-1 ...

  6. Java正则表达式-捕获组

    private Set<String> getCodes(String s) { Set<String> resultSet = new HashSet<>(); ...

  7. 在python3.5中pip安装scrapy，遇到 error: Microsoft Visual C++ 14.0 is required

    本来在python3.5中安装scrapy一路顺畅(pip install scrapy),中间遇到一个 error: Microsoft Visual C++ 14.0 is required. x ...

  8. bugzilla配置邮箱发送邮件问题

    2018-09-25 1.bugzilla注册账号,邮件无法发送 需要登录管理账号,配置邮箱服务 2.Can't locate object method "quit" via p ...

  9. 剑指offer——面试题11：旋转数组的最小数字

    #include"iostream" using namespace std; int GetMinNumber(int *data,int len) { ,right=len-, ...

  10. PIE SDK打开长时间序列数据

    1. 功能简介 时间序列数据(time series data)是在不同时间上收集到的数据,这类数据是按时间顺序收集到的,用于所描述现象随时间变化的情况.当前随着遥感卫星技术日新月异的发展,遥感卫星的 ...