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

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>

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

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元类__prepare__方法深入理解

    学习元类的时候,对__prepare__不是很理解,书上讲解的也不是很详细,最后通过查看stackoverflow的一些帖子对该方法有了一些理解,记录如下: 先看代码: class member_ta ...

  2. Spark Programming Guide《翻译》

    转载必须注明出处:梁杰帆 在这里要先感谢原作者们!如果各位在这里发现了错误之处,请大家提出 1.Initializing Spark     Spark程序必须做的第一件事就是创建一个SparkCon ...

  3. Httprequest 添加Cookie

    string postData = "Inputs={\"BarCode\":\"" + barCode + "\"}" ...

  4. Qt 学习之路 2（41）：model/view 架构

    Qt 学习之路 2(41):model/view 架构 豆子 2013年1月23日 Qt 学习之路 2 50条评论 有时,我们的系统需要显示大量数据,比如从数据库中读取数据,以自己的方式显示在自己的应 ...

  5. 【转】LAMBDAFICATOR: Crossing the gap from imperative to functional programming through refactorings

    Link:http://refactoring.info/tools/LambdaFicator/ Problem Description Java 8 will support lambda exp ...

  6. PyQt 5+qtDesigner

    https://blog.csdn.net/view994/article/details/84402069 https://blog.csdn.net/yizhou2010/article/deta ...

  7. 洛谷 P4093 [HEOI2016/TJOI2016]序列（Cdq+dp）

    题面 luogu 题解 \(Cdq分治+dp\) \(mx[i],mn[i]\)分别表示第\(i\)位最大,最小能取到多少 那么有 \(j < i\) \(mx[j] \le a[i]\) \( ...

  8. springboot(一)：入门

    什么是springboot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...

  9. DbUtils(二) 结果集实例

    单行数据处理:ScalarHandler    ArrayHandler    MapHandler    BeanHandler 多行数据处理:BeanListHandler    Abstract ...

  10. <th>折行显示

    设置了一些框架的样式导致折行显示失效,解决办法: https://jingyan.baidu.com/article/3a2f7c2e24cd1826afd611e7.html